|
|
基本用法
Drag.Move
創(chuàng)建你自己的拖動(dòng)對(duì)象非常的容易。稍微看一下下面的例子就行了。注意一下我們是怎么把我們的Drag.Move對(duì)象的選項(xiàng)和事件從我們的Drag選項(xiàng)和事件中分離出來的。Drag.Move類擴(kuò)展了Drag類，因此它可以接受Drag類的選項(xiàng)和事件。今天我們并不打算特別地講一講Drag類，不過我們還是要研究一下一些有用的選項(xiàng)和事件。看一下下面的代碼，然后學(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)來了，你就有了一個(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將毫無用處），但是這在定制你的用戶體驗(yàn)時(shí)將會(huì)派上用場。
參考代碼： [復(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í)你要做的任何事情
}
});
代碼示例
讓我們把剛才的這些代碼以一種方式組合起來，當(dāng)不同的事件觸發(fā)時(shí)，我們突出顯示不同的內(nèi)容，并且我們使用上面我們看到的選項(xiàng)來配置我們的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屬性。現(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>
更多學(xué)習(xí)……
這里是文檔中一些相關(guān)的章節(jié)：
- Drag
- Drag.Move
下載一個(gè)包含你開始所需要的所有東西的zip包
包含MooTools 1.2核心庫、MooTools 1.2擴(kuò)展庫，一個(gè)包含你的函數(shù)的外部JavaScript文件，一個(gè)定義你的樣式的外部CSS文件，一個(gè)簡單的HTML文件和上面的例子。
JavaScript技術(shù)：MooTools 1.2中的Drag.Move來實(shí)現(xiàn)拖放，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
