龍行天下

在不同的瀏覽器上默認(rèn)的拖拽能解決的問題相當(dāng)少,所以有很多的框架都能實(shí)現(xiàn)這么個(gè)功能.使用拖拽行為能很好的改善用戶體驗(yàn),尤其是在購物的時(shí)候能讓用戶感到很新奇和體面.Script.aculo.us使用了三個(gè)類實(shí)現(xiàn)拖拽和排序,它們是Draggable,Droppable,Sortable.要實(shí)現(xiàn)一個(gè)完整的拖拽行為,需要Draggable,和Droppable的配合使用,由于這連個(gè)類的方法比較多,我只選取比較實(shí)用的幾個(gè)方法進(jìn)行介紹.還是老規(guī)矩,先看看Demo:http://www1.qcxy.hb.cn/qphy/Script_Aculo_Us/DragDrop.html

Draggable

new Draggable("DraggableId"[,options])

主要選項(xiàng)

• snap:推拽的最小單位,默認(rèn)為false,可以是數(shù)組或者函數(shù),將這個(gè)屬性設(shè)置為[50,50],意味著最小的位移單位是50px,50px,如果設(shè)置為一個(gè)函數(shù),這個(gè)函數(shù)的參數(shù)為(x,y),這個(gè)x,y指示當(dāng)前的絕對(duì)坐標(biāo),函數(shù)應(yīng)該返回二維數(shù)組,上面的例子中的Drag(UnAcceptable)推拽到頁面的左上角是就會(huì)"吸附"上去,就是因?yàn)楹瘮?shù)的作用,詳細(xì)見源碼
• revert:推拽完畢之后是否回到原來的位置,默認(rèn)為false,也可以是一個(gè)函數(shù),這個(gè)函數(shù)必須返回true/false
• handle:"提手",移動(dòng)整個(gè)塊的時(shí)候通常不需要在整個(gè)塊的區(qū)域都可以拖拽,比如移動(dòng)一個(gè)欄目,通常只需要拖拽標(biāo)題(比如Google的個(gè)性化主頁),將該屬性設(shè)置為標(biāo)題的Id
• ghosting:推拽的過程中是否顯示"影子",默認(rèn)為false
• constraint:限制能拖動(dòng)的方向,默認(rèn)的兩個(gè)方向都可以,可以設(shè)置為"vertical","horizontal"的任意
• zindex:"影子"的z-Index屬性
• scroll:拖拽出視圖范圍是否顯示自動(dòng)滾動(dòng)
• scrollSensitivity/scrollSpeed:默認(rèn)值分為為20/15,控制滾動(dòng)的敏感度和滾動(dòng)速度
• delay:拖拽前的延時(shí),開始拖拽后經(jīng)過這個(gè)時(shí)間才"回過神來"

這里需要說明的是并非所有的標(biāo)簽都支持該行為,詳細(xì)的情況請(qǐng)參閱官方文檔

API

• onStart:開始拖拽調(diào)用該函數(shù),接受兩個(gè)參數(shù)(obj,oEvent)前者是$(DraggableId),后者是當(dāng)前事件的event對(duì)象
• onDrag:在拖拽過程中反復(fù)的調(diào)用該函數(shù),同樣接受兩個(gè)參數(shù)(obj,oEvent)
• change:在onDrag后調(diào)用,也會(huì)反復(fù)調(diào)用
• onEnd:拖拽行為結(jié)束調(diào)用,即鼠標(biāo)彈起時(shí)激發(fā)
• destroy():該方法銷毀元素的拖拽行為

Droppables

Droppables(注意是復(fù)數(shù)形式)是一個(gè)抽象類,不能被實(shí)例化,只有一些靜態(tài)方法,常用的方法有add和move,分別增加可放置元素,和去除可放置元素

add方法:Dropables.add("ContainerId"[,options]),常用的選項(xiàng)

• accept: 數(shù)組或者字符串,表示該容器接受的元素的className的集合,默認(rèn)的任何元素都接收
• hoverclass:當(dāng)符合接受要求的元素拖至容器上時(shí),其className
• onDrop():被拖拽的符合要求的元素在這里放置時(shí)調(diào)用該函數(shù),接受三個(gè)參數(shù)(draggable,droppable,oEvent),draggable是被拖拽元素,droppable是被放置元素,oEvent當(dāng)前事件對(duì)象

remove("ContainerId"),該方法去除容器的放置行為

(上面例子的源代碼)

Sortable

Sortable是一組可以通過拖拽交換位置的元素,可以先看看實(shí)例(

• ghosting:拖動(dòng)時(shí)是否顯示"影子",默認(rèn)為false
• constraint:允許的拖動(dòng)方向,默認(rèn)為兩個(gè)方向都可以,值為"horizontal","vertical"中的任一
• tag:能被拖動(dòng)元素的標(biāo)簽,默認(rèn)為"li"
• hoverclass:拖動(dòng)經(jīng)過可以放置的位置是,可放置的元素的className
• dropOnEmpty:默認(rèn)為false,是否在空的元素上放置
• handle/delayscroll/scrollSensitivity/scrollSpeed::同Draggable
• containment:數(shù)組,存放所有的放置元素的ID,參見實(shí)例的最后一個(gè)例子
• onUpdate():該方法接受參數(shù)$("ContainerId"),在拖動(dòng)到可放置位置是調(diào)用該方法
• onChange():結(jié)束拖拽行為時(shí)調(diào)用該方法,接受參數(shù)element,表示被拖拽的元素