MooTools教程(12):Drag.Move來實(shí)現(xiàn)拖放

2024-07-21 02:04:24

字體：大中小

供稿：網(wǎng)友

今天我們開始第十二講，今天我們將仔細(xì)看一下drag.move——一個(gè)很強(qiáng)大的mootools類，它可以讓你給你的web應(yīng)用添加拖放功能。它的使用和我們見過的其他的插件類似：首先你使用“new”關(guān)鍵字來創(chuàng)建一個(gè)drag.move對象并賦值給一個(gè)變量，然后你再定義你的選項(xiàng)和事件。這就是全部要做的事情，不過你一定要注意一下下面的例子中描述的ie的css怪異現(xiàn)象。

基本用法

drag.move

創(chuàng)建你自己的拖動對象非常的容易。稍微看一下下面的例子就行了。注意一下我們是怎么把我們的drag.move對象的選項(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事件會傳遞拖動的元素，
// 還有可接納拖動元素的元素（droppable）
ondrop: function(el, dr) {
// 顯示拖動到可接納元素的元素的id
alert(dr.get('id'));
},
// drag事件
// drag事件傳遞拖動的元素
oncomplete: function(el) {
alert(el.get('id'));
}
});

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

drag.move選項(xiàng)

drag.move選項(xiàng)有兩個(gè)很重要的元素：

droppables——設(shè)置可接納的（droppable）元素的選擇器（這個(gè)元素將會注冊拖動相關(guān)的事件）
container——設(shè)置拖動元素的容器（可以保證元素一直在容器內(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對象
var mydrag = new drag.move(dragelement , {
// drag.move選項(xiàng)
// 把我們上面定義的droppable賦值給droppables
droppables: dropelements ,
// 把我們的容器元素變量賦值給容器
container: dragcontainer
});

現(xiàn)在你的可接受拖動元素的元素就包含進(jìn)來了，你就有了一個(gè)可以接受拖放元素的類。

drag.move事件

這個(gè)事件可以讓你在不同的點(diǎn)去觸發(fā)一個(gè)函數(shù)，比如當(dāng)你開始拖動一個(gè)對象或者你準(zhǔn)備放下它。每一個(gè)drag.move事件都將傳遞拖動元素和接受拖動元素的元素（我們一直叫做droppable）作為參數(shù)。

ondrop——這個(gè)事件將在一個(gè)可拖動的元素放到一個(gè)接受拖動元素的元素里面時(shí)觸發(fā)。
onleave——這個(gè)事件將在一個(gè)可拖動的元素離開一個(gè)接受拖動元素的元素時(shí)觸發(fā)。
onenter——這這個(gè)事件將在一個(gè)可拖動的元素進(jìn)入一個(gè)接受拖動元素的元素時(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ù)將傳遞可拖動的元素（這個(gè)例子中是'el'）
// 還有接受拖動元素的元素（這個(gè)例子中是'dr'）
ondrop: function(el, dr) {
// 下面這句的意思大概是：
// 如果你拖動的元素不是到了可以接受拖動元素的元素的范圍內(nèi)
if (!dr) {
// 什么都不做
}
// 否則（從邏輯上講，
// 如果你拖動的那個(gè)的元素到了可接受拖動元素的元素范圍內(nèi)）
// 做這一件事件
else {
// 在這里做一些事情
};
},
onleave: function(el, dr) {
// 這個(gè)事件將在拖動的元素離開可接受拖動對象的元素時(shí)觸發(fā)
},
onenter: function(el, dr) {
// 這個(gè)事件將在拖動的元素進(jìn)入可接受拖動對象的元素時(shí)觸發(fā)
}
});

一些drag事件和選項(xiàng)

對于drag，有許多選項(xiàng)和事件，不過這里我們只看一小部分。

snap——選項(xiàng)

snap選項(xiàng)可以讓你設(shè)置用戶的鼠標(biāo)至少移動多少個(gè)像素后開始拖動。默認(rèn)是6，你額可以設(shè)置為任何數(shù)字或者值為數(shù)字的變量。很明顯，這里有一些合理的限制（比如設(shè)置snap為1000將毫無用處），但是這在定制你的用戶體驗(yàn)時(shí)將會派上用場。

參考代碼： [復(fù)制代碼] [保存代碼]

var mydrag = new drag.move(dragelement , {
// drag選項(xiàng)
snap: 10
});

handle——選項(xiàng)

handle可以給你的拖動元素添加一個(gè)控制對象。這個(gè)控制對象將成為唯一的可以接受“抓取”（拖動）的元素，從而允許你使用其他的元素做一些其他的事情。要設(shè)置一個(gè)控制對象，只需調(diào)用這個(gè)元素就可以了。

參考代碼： [復(fù)制代碼] [保存代碼]

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

onstart——事件

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

參考代碼： [復(fù)制代碼] [保存代碼]

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

ondarg——事件

這個(gè)ondrag事件，將會在你拖動一個(gè)元素時(shí)連續(xù)地觸發(fā)。

參考代碼： [復(fù)制代碼] [保存代碼]

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

oncomplete——事件

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

參考代碼： [復(fù)制代碼] [保存代碼]

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

代碼示例

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

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

參考代碼： [復(fù)制代碼] [保存代碼]

/* 下面這個(gè)定義通常是不錯(cuò)的主意 */
body {
margin: 0
padding: 0
}
/* 確保可拖動的元素有"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
}
/* 確保拖動的容器有“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)在我們再建立我們的html：

參考代碼： [復(fù)制代碼] [保存代碼]

<div id="drag_cont">
<div id="start" class="indicator"><span>拖動開始</span></div>
<div id="drag_ind" class="indicator"><span>拖動中</span></div>
<div id="complete" class="indicator"><span>拖動結(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>控制對象</span></div>
</div>
<div id="drop_here" class="draggable"> </div>
</div>