|
|
基本用法
Drag.Move
創建你自己的拖動對象非常的容易。稍微看一下下面的例子就行了。注意一下我們是怎么把我們的Drag.Move對象的選項和事件從我們的Drag選項和事件中分離出來的。Drag.Move類擴展了Drag類，因此它可以接受Drag類的選項和事件。今天我們并不打算特別地講一講Drag類，不過我們還是要研究一下一些有用的選項和事件。看一下下面的代碼，然后學習一下其中的細節。
參考代碼：
復制代碼 代碼如下:
var myDrag = new Drag.Move(dragElement, {
// Drag.Move的選項
droppables: dropElement,
container: dragContainer,
// Drag的選項
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選項
Drag.Move選項有兩個很重要的元素：
droppables――設置可接納的（droppable）元素的選擇器（這個元素將會注冊拖動相關的事件）
container――設置拖動元素的容器（可以保證元素一直在容器內）
設置這個選項非常的容易：
參考代碼：
復制代碼 代碼如下:
// 這里我們通過id定義了一個元素
var dragElement = $('drag_element');
// 這里我們通過class定義了一組元素
var dropElements = $$('.drag_element');
var dragContainer = $('drag_container');
// 現在創建我們的Drag.Move對象
var myDrag = new Drag.Move(dragElement , {
// Drag.Move選項
// 把我們上面定義的droppable賦值給droppables
droppables: dropElements ,
// 把我們的容器元素變量賦值給容器
container: dragContainer
});
現在你的可接受拖動元素的元素就包含進來了，你就有了一個可以接受拖放元素的類。
Drag.Move事件
這個事件可以讓你在不同的點去觸發一個函數，比如當你開始拖動一個對象或者你準備放下它。每一個Drag.Move事件都將傳遞拖動元素和接受拖動元素的元素（我們一直叫做droppable）作為參數。
onDrop――這個事件將在一個可拖動的元素放到一個接受拖動元素的元素里面時觸發。
onLeave――這個事件將在一個可拖動的元素離開一個接受拖動元素的元素時觸發。
onEnter――這這個事件將在一個可拖動的元素進入一個接受拖動元素的元素時觸發。
這些事件中的每一個事件都將調用一個函數，每個函數都將在相應的事件觸發時調用。
參考代碼：
復制代碼 代碼如下:
var dragContainer = $('drag_container');
var myDrag = new Drag.Move(dragElement , {
// Drag.Move選項
droppables: dropElements ,
container: dragContainer ,
// Drag.Move事件
// Drag.Move函數將傳遞可拖動的元素（這個例子中是'el'）
// 還有接受拖動元素的元素（這個例子中是'dr'）
onDrop: function(el, dr) {
// 下面這句的意思大概是：
// 如果你拖動的元素不是到了可以接受拖動元素的元素的范圍內
if (!dr) {
// 什么都不做
}
// 否則（從邏輯上講，
// 如果你拖動的那個的元素到了可接受拖動元素的元素范圍內）
// 做這一件事件
else {
// 在這里做一些事情
};
},
onLeave: function(el, dr) {
// 這個事件將在拖動的元素離開可接受拖動對象的元素時觸發
},
onEnter: function(el, dr) {
// 這個事件將在拖動的元素進入可接受拖動對象的元素時觸發
}
});
一些Drag事件和選項
對于Drag，有許多選項和事件，不過這里我們只看一小部分。
snap――選項
snap選項可以讓你設置用戶的鼠標至少移動多少個像素后開始拖動。默認是6，你額可以設置為任何數字或者值為數字的變量。很明顯，這里有一些合理的限制（比如設置snap為1000將毫無用處），但是這在定制你的用戶體驗時將會派上用場。
參考代碼： [復制代碼] [保存代碼]
var myDrag = new Drag.Move(dragElement , {
// Drag選項
snap: 10
});
handle――選項
handle可以給你的拖動元素添加一個控制對象。這個控制對象將成為唯一的可以接受“抓取”（拖動）的元素，從而允許你使用其他的元素做一些其他的事情。要設置一個控制對象，只需調用這個元素就可以了。
參考代碼：
復制代碼 代碼如下:
// 這里我們使用了一個類選擇器建立了一個數組
// 這將使得我們很輕易地添加多個控制對象，如果我們決定要有多個可接受拖動元素的元素
var dragHandle = $('drag_handle');
var myDrag = new Drag.Move(dragElement , {
// Drag選項
handle: dragHandle
});
onStart――事件
onStart和它名字一樣，當開始拖動時觸發這個事件。如果你設置了一個很大的snap，這個事件將不會觸發直到鼠標離開元素有指定的snap值那么遠。
參考代碼：
復制代碼 代碼如下:
var myDrag = new Drag.Move(dragElement , {
// Drag選項
// Drag選項將把拖動的元素作為參數傳遞
onStart: function(el) {
// 在這里放置開始拖動時你要做的任何事情
}
});
onDarg――事件
這個onDrag事件，將會在你拖動一個元素時連續地觸發。
參考代碼：
復制代碼 代碼如下:
var myDrag = new Drag.Move(dragElement , {
// Drag選項
// Drag選項將把拖動的元素作為參數傳遞
onDrag: function(el) {
// 在這里放置開始拖動時你要做的任何事情
}
});
onComplete――事件
最后是onComplete事件，將在你放下一個拖動元素時觸發，而不管你是不是把它放到了一個可以接受拖動元素的元素內部。
參考代碼：
復制代碼 代碼如下:
var myDrag = new Drag.Move(dragElement , {
// Drag選項
// Drag選項將把拖動的元素作為參數傳遞
onComplete: function(el) {
// 在這里放置開始拖動時你要做的任何事情
}
});
代碼示例
讓我們把剛才的這些代碼以一種方式組合起來，當不同的事件觸發時，我們突出顯示不同的內容，并且我們使用上面我們看到的選項來配置我們的Drag.Move對象：
參考代碼：
復制代碼 代碼如下:
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選項
droppables: dropElement,
container: dragContainer,
// Drag選項
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中明確地指出它的位置。最重要的一點是你需要記住設置容器的位置為“position: relative”，而設置可拖動的元素的位置為“position: absolute”，然后一定要設置可拖動元素的left和top屬性。現在，如果你正在為其他瀏覽器構建并且遵循此規則，你可以忽略這一部分：
參考代碼：
復制代碼 代碼如下:
/* 下面這個定義通常是不錯的主意 */
body {
margin: 0
padding: 0
}
/* 確保可拖動的元素有"position: absolute" */
/* 并設置開始時的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
}
現在我們再建立我們的HTML：
參考代碼：
復制代碼 代碼如下:
<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>拖動結束</span></div>
<div id="enter" class="indicator"><span>進入了Droppable元素</span></div>
<div id="leave" class="indicator"><span>離開了Droppable元素</span></div>
<div id="drop_in_droppable" class="indicator"><span>放進了Droppable元素</span></div>
<div id="drag_me">
<div id="drag_me_handle"><span>控制對象</span></div>
</div>
<div id="drop_here" class="draggable"> </div>
</div>
更多學習……
這里是文檔中一些相關的章節：
- Drag
- Drag.Move
下載一個包含你開始所需要的所有東西的zip包
包含MooTools 1.2核心庫、MooTools 1.2擴展庫，一個包含你的函數的外部JavaScript文件，一個定義你的樣式的外部CSS文件，一個簡單的HTML文件和上面的例子。
JavaScript技術：MooTools 1.2中的Drag.Move來實現拖放，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
