DIV CSS 佈局教程網

今天我們開始第十二講，今天我們將仔細看一下Drag.Move——一個很強大的MooTools類，它可以讓你給你的web應用添加拖放功能。它的使用和我們見過的其他的插件類似：首先你使用“new”關鍵字來創建一個Drag.Move對象並賦值給一個變量，然後你再定義你的選項和事件。這就是全部要做的事情，不過你一定要注意一下下面的例子中描述的IE的CSS怪異現象。

基本用法

Drag.Move

創建你自己的拖動對象非常的容易。稍微看一下下面的例子就行了。注意一下我們是怎麼把我們的Drag.Move對象的選項和事件從我們的Drag選項和事件中分離出來的。Drag.Move類擴展了Drag類，因此它可以接受Drag類的選項和事件。今天我們並不打算特別地講一講Drag類，不過我們還是要研究一下一些有用的選項和事件。看一下下面的代碼，然後學習一下其中的細節。

1. var myDrag = new Drag.Move(dragElement, {
2.     // Drag.Move的選項
3.     droppables: dropElement,
4.     container: dragContainer,
5.     // Drag的選項
6.     handle: dragHandle,
7.     // Drag.Move 的事件
8.     // Drag.Move事件會傳遞拖動的元素， 
9.     // 還有可接納拖動元素的元素（droppable）
10.     onDrop: function(el, dr) {
11.         // 顯示拖動到可接納元素的元素的id
12.         alert(dr.get('id'));
13.     },
14.     // Drag事件
15.     // Drag事件傳遞拖動的元素
16.     onComplete: function(el) {
17.         alert(el.get('id'));
18.     }
19. });

在這裡我們稍微打斷一下……

Drag.Move選項

Drag.Move選項有兩個很重要的元素：

• droppables——設置可接納的（droppable）元素的選擇器（這個元素將會注冊拖動相關的事件）
• container——設置拖動元素的容器（可以保證元素一直在容器內）

設置這個選項非常的容易：

1. // 這裡我們通過id定義了一個元素
2. var dragElement = $('drag_element');
3. // 這裡我們通過class定義了一組元素
4. var dropElements = $$('.drag_element');
5.  
6. var dragContainer = $('drag_container');
7. // 現在創建我們的Drag.Move對象
8. var myDrag = new Drag.Move(dragElement , {
9.     // Drag.Move選項
10.     // 把我們上面定義的droppable賦值給droppables
11.     droppables: dropElements ,
12. &nb