MooTools 1.2中的Drag.Move來(lái)實(shí)現(xiàn)拖放

更新時(shí)間：2009年09月15日 19:36:53 作者：

今天我們開始第十二講，今天我們將仔細(xì)看一下Drag.Move——一個(gè)很強(qiáng)大的MooTools類，它可以讓你給你的web應(yīng)用添加拖放功能。

它的使用和我們見過的其他的插件類似：首先你使用“new”關(guān)鍵字來(lái)創(chuàng)建一個(gè)Drag.Move對(duì)象并賦值給一個(gè)變量，然后你再定義你的選項(xiàng)和事件。這就是全部要做的事情，不過你一定要注意一下下面的例子中描述的IE的CSS怪異現(xiàn)象。
基本用法
Drag.Move
創(chuàng)建你自己的拖動(dòng)對(duì)象非常的容易。稍微看一下下面的例子就行了。注意一下我們是怎么把我們的Drag.Move對(duì)象的選項(xiàng)和事件從我們的Drag選項(xiàng)和事件中分離出來(lái)的。Drag.Move類擴(kuò)展了Drag類，因此它可以接受Drag類的選項(xiàng)和事件。今天我們并不打算特別地講一講Drag類，不過我們還是要研究一下一些有用的選項(xiàng)和事件?？匆幌孪旅娴拇a，然后學(xué)習(xí)一下其中的細(xì)節(jié)。
參考代碼：

復(fù)制代碼代碼如下:

 
var myDrag = new Drag.Move(dragElement, { 
// Drag.Move的選項(xiàng) 
droppables: dropElement, 
container: dragContainer, 
// Drag的選項(xiàng) 
handle: dragHandle, 
// Drag.Move 的事件 
// Drag.Move事件會(huì)傳遞拖動(dòng)的元素， 
// 還有可接納拖動(dòng)元素的元素（droppable） 
onDrop: function(el, dr) { 
// 顯示拖動(dòng)到可接納元素的元素的id 
alert(dr.get('id')); 
}, 
// Drag事件 
// Drag事件傳遞拖動(dòng)的元素 
onComplete: function(el) { 
alert(el.get('id')); 
} 
}); 

在這里我們稍微打斷一下……
Drag.Move選項(xiàng)
Drag.Move選項(xiàng)有兩個(gè)很重要的元素：
droppables——設(shè)置可接納的（droppable）元素的選擇器（這個(gè)元素將會(huì)注冊(cè)拖動(dòng)相關(guān)的事件）
container——設(shè)置拖動(dòng)元素的容器（可以保證元素一直在容器內(nèi)）
設(shè)置這個(gè)選項(xiàng)非常的容易：
參考代碼：

復(fù)制代碼代碼如下:

 
// 這里我們通過id定義了一個(gè)元素 
var dragElement = $('drag_element'); 
// 這里我們通過class定義了一組元素 
var dropElements = $$('.drag_element'); 
var dragContainer = $('drag_container'); 
// 現(xiàn)在創(chuàng)建我們的Drag.Move對(duì)象 
var myDrag = new Drag.Move(dragElement , { 
// Drag.Move選項(xiàng) 
// 把我們上面定義的droppable賦值給droppables 
droppables: dropElements , 
// 把我們的容器元素變量賦值給容器 
container: dragContainer 
}); 

現(xiàn)在你的可接受拖動(dòng)元素的元素就包含進(jìn)來(lái)了，你就有了一個(gè)可以接受拖放元素的類。
Drag.Move事件
這個(gè)事件可以讓你在不同的點(diǎn)去觸發(fā)一個(gè)函數(shù)，比如當(dāng)你開始拖動(dòng)一個(gè)對(duì)象或者你準(zhǔn)備放下它。每一個(gè)Drag.Move事件都將傳遞拖動(dòng)元素和接受拖動(dòng)元素的元素（我們一直叫做droppable）作為參數(shù)。
onDrop——這個(gè)事件將在一個(gè)可拖動(dòng)的元素放到一個(gè)接受拖動(dòng)元素的元素里面時(shí)觸發(fā)。
onLeave——這個(gè)事件將在一個(gè)可拖動(dòng)的元素離開一個(gè)接受拖動(dòng)元素的元素時(shí)觸發(fā)。
onEnter——這這個(gè)事件將在一個(gè)可拖動(dòng)的元素進(jìn)入一個(gè)接受拖動(dòng)元素的元素時(shí)觸發(fā)。
這些事件中的每一個(gè)事件都將調(diào)用一個(gè)函數(shù)，每個(gè)函數(shù)都將在相應(yīng)的事件觸發(fā)時(shí)調(diào)用。
參考代碼：

復(fù)制代碼代碼如下:

 
var dragContainer = $('drag_container'); 
var myDrag = new Drag.Move(dragElement , { 
// Drag.Move選項(xiàng) 
droppables: dropElements , 
container: dragContainer , 
// Drag.Move事件 
// Drag.Move函數(shù)將傳遞可拖動(dòng)的元素（這個(gè)例子中是'el'） 
// 還有接受拖動(dòng)元素的元素（這個(gè)例子中是'dr'） 
onDrop: function(el, dr) { 
// 下面這句的意思大概是： 
// 如果你拖動(dòng)的元素不是到了可以接受拖動(dòng)元素的元素的范圍內(nèi) 
if (!dr) { 
// 什么都不做 
} 
// 否則（從邏輯上講， 
// 如果你拖動(dòng)的那個(gè)的元素到了可接受拖動(dòng)元素的元素范圍內(nèi)） 
// 做這一件事件 
else { 
// 在這里做一些事情 
}; 
}, 
onLeave: function(el, dr) { 
// 這個(gè)事件將在拖動(dòng)的元素離開可接受拖動(dòng)對(duì)象的元素時(shí)觸發(fā) 
}, 
onEnter: function(el, dr) { 
// 這個(gè)事件將在拖動(dòng)的元素進(jìn)入可接受拖動(dòng)對(duì)象的元素時(shí)觸發(fā) 
} 
}); 

一些Drag事件和選項(xiàng)
對(duì)于Drag，有許多選項(xiàng)和事件，不過這里我們只看一小部分。
snap——選項(xiàng)
snap選項(xiàng)可以讓你設(shè)置用戶的鼠標(biāo)至少移動(dòng)多少個(gè)像素后開始拖動(dòng)。默認(rèn)是6，你額可以設(shè)置為任何數(shù)字或者值為數(shù)字的變量。很明顯，這里有一些合理的限制（比如設(shè)置snap為1000將毫無(wú)用處），但是這在定制你的用戶體驗(yàn)時(shí)將會(huì)派上用場(chǎng)。
參考代碼： [復(fù)制代碼] [保存代碼]
var myDrag = new Drag.Move(dragElement , {
// Drag選項(xiàng)
snap: 10
});
handle——選項(xiàng)
handle可以給你的拖動(dòng)元素添加一個(gè)控制對(duì)象。這個(gè)控制對(duì)象將成為唯一的可以接受“抓取”（拖動(dòng)）的元素，從而允許你使用其他的元素做一些其他的事情。要設(shè)置一個(gè)控制對(duì)象，只需調(diào)用這個(gè)元素就可以了。
參考代碼：

復(fù)制代碼代碼如下:

 
// 這里我們使用了一個(gè)類選擇器建立了一個(gè)數(shù)組 
// 這將使得我們很輕易地添加多個(gè)控制對(duì)象，如果我們決定要有多個(gè)可接受拖動(dòng)元素的元素 
var dragHandle = $('drag_handle'); 
var myDrag = new Drag.Move(dragElement , { 
// Drag選項(xiàng) 
handle: dragHandle 
}); 

onStart——事件
onStart和它名字一樣，當(dāng)開始拖動(dòng)時(shí)觸發(fā)這個(gè)事件。如果你設(shè)置了一個(gè)很大的snap，這個(gè)事件將不會(huì)觸發(fā)直到鼠標(biāo)離開元素有指定的snap值那么遠(yuǎn)。
參考代碼：

復(fù)制代碼代碼如下:

 
var myDrag = new Drag.Move(dragElement , { 
// Drag選項(xiàng) 
// Drag選項(xiàng)將把拖動(dòng)的元素作為參數(shù)傳遞 
onStart: function(el) { 
// 在這里放置開始拖動(dòng)時(shí)你要做的任何事情 
} 
}); 

onDarg——事件
這個(gè)onDrag事件，將會(huì)在你拖動(dòng)一個(gè)元素時(shí)連續(xù)地觸發(fā)。
參考代碼：

復(fù)制代碼代碼如下:

 
var myDrag = new Drag.Move(dragElement , { 
// Drag選項(xiàng) 
// Drag選項(xiàng)將把拖動(dòng)的元素作為參數(shù)傳遞 
onDrag: function(el) { 
// 在這里放置開始拖動(dòng)時(shí)你要做的任何事情 
} 
}); 

onComplete——事件
最后是onComplete事件，將在你放下一個(gè)拖動(dòng)元素時(shí)觸發(fā)，而不管你是不是把它放到了一個(gè)可以接受拖動(dòng)元素的元素內(nèi)部。
參考代碼：

復(fù)制代碼代碼如下:

 
var myDrag = new Drag.Move(dragElement , { 
// Drag選項(xiàng) 
// Drag選項(xiàng)將把拖動(dòng)的元素作為參數(shù)傳遞 
onComplete: function(el) { 
// 在這里放置開始拖動(dòng)時(shí)你要做的任何事情 
} 
}); 

代碼示例
讓我們把剛才的這些代碼以一種方式組合起來(lái)，當(dāng)不同的事件觸發(fā)時(shí)，我們突出顯示不同的內(nèi)容，并且我們使用上面我們看到的選項(xiàng)來(lái)配置我們的Drag.Move對(duì)象：
參考代碼：

復(fù)制代碼代碼如下:

 
window.addEvent('domready', function() { 
var dragElement = $('drag_me'); 
var dragContainer = $('drag_cont'); 
var dragHandle = $('drag_me_handle'); 
var dropElement = $$('.draggable'); 
var startEl = $('start'); 
var completeEl = $('complete'); 
var dragIndicatorEl = $('drag_ind'); 
var enterDrop = $('enter'); 
var leaveDrop = $('leave'); 
var dropDrop = $('drop_in_droppable'); 
var myDrag = new Drag.Move(dragElement, { 
// Drag.Move選項(xiàng) 
droppables: dropElement, 
container: dragContainer, 
// Drag選項(xiàng) 
handle: dragHandle, 
// Drag.Move事件 
onDrop: function(el, dr) { 
if (!dr) { } 
else { 
dropDrop.highlight('#FB911C'); //橙色閃爍 
el.highlight('#fff'); //白色閃爍 
dr.highlight('#667C4A'); //綠色閃爍 
}; 
}, 
onLeave: function(el, dr) { 
leaveDrop.highlight('#FB911C'); //橙色閃爍 
}, 
onEnter: function(el, dr) { 
enterDrop.highlight('#FB911C'); //橙色閃爍 
}, 
// Drag事件 
onStart: function(el) { 
startEl.highlight('#FB911C'); //橙色閃爍 
}, 
onDrag: function(el) { 
dragIndicatorEl.highlight('#FB911C'); //橙色閃爍 
}, 
onComplete: function(el) { 
completeEl.highlight('#FB911C'); //橙色閃爍 
} 
}); 
}); 

注意一下CSS：在IE中，為了能夠適合地注冊(cè)Drag.Move的容器，你需要在下面的CSS中明確地指出它的位置。最重要的一點(diǎn)是你需要記住設(shè)置容器的位置為“position: relative”，而設(shè)置可拖動(dòng)的元素的位置為“position: absolute”，然后一定要設(shè)置可拖動(dòng)元素的left和top屬性?，F(xiàn)在，如果你正在為其他瀏覽器構(gòu)建并且遵循此規(guī)則，你可以忽略這一部分：
參考代碼：

復(fù)制代碼代碼如下:

 
/* 下面這個(gè)定義通常是不錯(cuò)的主意 */ 
body { 
margin: 0 
padding: 0 
} 
/* 確保可拖動(dòng)的元素有"position: absolute" */ 
/* 并設(shè)置開始時(shí)的left和top屬性 */ 
#drag_me { 
width: 100px 
height: 100px 
background-color: #333 
position: absolute 
top: 0 
left: 0 
} 
#drop_here { 
width: 200px 
height: 200px 
background-color: #eee 
} 
/* 確保拖動(dòng)的容器有“position:relative” */ 
#drag_cont { 
background-color: #ccc 
height: 600px 
width: 500px 
position: relative 
margin-top: 100px 
margin-left: 100px 
} 
#drag_me_handle { 
width: 100% 
height: auto 
background-color: #666 
} 
#drag_me_handle span { 
display: block 
padding: 5px 
} 
.indicator { 
width: 100% 
height: auto 
background-color: #0066FF 
border-bottom: 1px solid #eee 
} 
.indicator span { 
padding: 10px 
display: block 
} 
.draggable { 
width: 200px 
height: 200px 
background-color: blue 
} 

現(xiàn)在我們?cè)俳⑽覀兊腍TML：
參考代碼：

復(fù)制代碼代碼如下:

 
<div id="drag_cont"> 
<div id="start" class="indicator"><span>拖動(dòng)開始</span></div> 
<div id="drag_ind" class="indicator"><span>拖動(dòng)中</span></div> 
<div id="complete" class="indicator"><span>拖動(dòng)結(jié)束</span></div> 
<div id="enter" class="indicator"><span>進(jìn)入了Droppable元素</span></div> 
<div id="leave" class="indicator"><span>離開了Droppable元素</span></div> 
<div id="drop_in_droppable" class="indicator"><span>放進(jìn)了Droppable元素</span></div> 
<div id="drag_me"> 
<div id="drag_me_handle"><span>控制對(duì)象</span></div> 
</div> 
<div id="drop_here" class="draggable"> </div> 
</div> 