MooTools提供了一项巨大的功能，可帮助您向网页元素添加拖放功能.我们可以通过创建自己的新 Drag.Move 对象来完成此操作.使用此对象，您可以定义选项和事件. Drag和Drag.Move类来自MooTools More库.
让我们讨论Drag.Move对象的选项和事件.
Drag.Move是一个用于向html元素添加拖放功能的对象. Drag.Move扩展Drag，因此我们可以使用Drag.Move对象的Drag类的所有Options和Events.查看以下语法并了解如何使用Drag.Move对象.
var myDrag = new Drag.Move(dragElement, {
// Drag.Move Options
droppables: dropElement,
container: dragContainer,
// Drag Options
handle: dragHandle,
// Drag.Move Events
// the Drag.Move events pass the dragged element,
// and the dropped into droppable element
onDrop: function(el, dr) {
//will alert the id of the dropped into droppable element
alert(dr.get('id'));
},
// Drag Events
// Drag events pass the dragged element
onComplete: function(el) {
alert(el.get('id'));
}
});Drag.Move提供以下选项来维护具有拖放功能和减号的html元素;
droppable : 这有助于您设置droppable元素的选择器(在与drop相关的事件上注册的元素).
容器 : 这有助于您设置拖动元素的容器(将元素保留在其中).
snap : 这有助于您设置在可拖动元素开始拖动之前用户必须拖动光标的px数.默认值为6，您可以将其设置为任意数量的代表数字的变量.
handle : 这有助于您为可拖动元素添加句柄.句柄成为唯一接受抓取的元素.
请查看以下语法，了解如何以及在何处定义droppable和容器，捕捉和句柄元素.
//here we define a single element by id
var dragElement = $('drag_element');
//here we define an array of elements by class
var dropElements = $$('.drag_element');
var dragContainer = $('drag_container');
var dragHandle = $('drag_handle');
//now we set up our Drag.Move object
var myDrag = new Drag.Move(dragElement , {
// Drag.Move Options
// set up our droppables element with the droppables var we defined above
droppables: dropElements ,
// set up our container element with the container element var
container: dragContainer
// set up pixels the user must drag.
Snap: 10
// Adds a handle to your draggable element
handle: dragHandle
});Drag.Move事件提供可在不同级别的动作中使用的不同功能.例如，当您开始拖放对象时，每个Drag.Move事件都会将拖动的元素或已删除的元素作为参数传递.
以下是支持的事件 :
这会在拖动开始时引发一个事件.如果设置长按，则此事件不会升高，直到鼠标距离为止.看看下面的语法.
语法
var myDrag = new Drag.Move(dragElement , {
// Drag options will pass the dragged element as a parameter
onStart: function(el) {
// put whatever you want to happen on start in here
}
});这会在您拖动元素时持续引发事件.看看下面的语法.
语法
var myDrag = new Drag.Move(dragElement , {
// Drag options will pass the dragged element as a parameter
onDrag: function(el) {
// put whatever you want to happen on drag in here
}
});当您将可拖动元素放入droppable元素时，会引发一个事件.看看下面的语法.
语法
var myDrag = new Drag.Move(dragElement , {
// It will pass the draggable element ('el' in this case)
// and the droppable element the draggable is interacting with ('dr' here)
onDrop: function(el, dr) {
// put whatever you want to happen on drop in here
}
});当可拖动元素留下可放置元素的边界时，这会引发一个事件.看看下面的语法.
语法
var myDrag = new Drag.Move(dragElement , {
// It will pass the draggable element ('el' in this case)
// and the droppable element the draggable is interacting with ('dr' here)
onLeave: function(el, dr) {
// put whatever you want to happen on Leave from droppable area in here
}
});当可拖动元素进入可放置元素区域时，这会引发.看看下面的语法.
语法
var myDrag = new Drag.Move(dragElement , {
// It will pass the draggable element ('el' in this case)
// and the droppable element the draggable is interacting with ('dr' here)
onEnter: function(el, dr) {
// this will fire when a draggable enters a droppable element
}
});这会引发一个事件. onComplete指的是当你丢弃一个droppable时，它会提升你是否落在一个droppable中.看看下面的语法.
语法
var myDrag = new Drag.Move(dragElement , {
// Drag Options
// Drag options will pass the dragged element as a parameter
onComplete: function(el) {
// put whatever you want to happen on complete
}
});让我们举一个例子来探索本章中介绍的所有功能.功能包括 - Drag，Drag.Move，onEnter，onLeave，onDrop，onStart，onDrag和onComplete.在这个例子中，我们提供了一个HANDLE，使用它可以将可拖动对象拖到容器中的任何位置.对于每个动作，左侧都有通知(以蓝色表示).容器中有一个Droppable区域.如果Draggable对象进入Droppable区域，则激活最后三个指示符.请看下面的代码.
示例
<!DOCTYPE html>
<html>
<head>
<style>
/* this is generally a good idea */
body {
margin: 0;
padding: 0;
}
/* make sure the draggable element has "position: absolute"
and then top and left are set for the start position */
#drag_me {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
top: 0;
left: 0;
}
#drop_here {
width: 80%;
height: 200px;
background-color: #eee;
margin-left: 100px;
margin-top: -200px !important;
}
/* make sure the drag container is set with position relative */
#drag_cont {
background-color: #ccc;
height: auto;
width: 500px;
position:relative;
margin-top: 20px;
margin-left: 20px;
margin-bottom: auto;
}
#drag_me_handle {
width: 100%;
height: auto;
background-color: #F5B041;
}
#drag_me_handle span {
display: block;
padding: 20px;
}
.indicator {
width: 100px;
height: auto;
background-color: #0066FF;
border-bottom: 1px solid #eee;
}
.indicator span {
padding: 10px;
display: block;
}
.draggable {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
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 options
droppables: dropElement,
container: dragContainer,
// Drag options
handle: dragHandle,
// Drag.Move Events
onDrop: function(el, dr) {
if (!dr) { }else {
dropDrop.highlight('#FB911C'); //flashes orange
el.highlight('#fff'); //flashes white
dr.highlight('#667C4A'); //flashes green
};
},
onLeave: function(el, dr) {
leaveDrop.highlight('#FB911C'); //flashes orange
},
onEnter: function(el, dr) {
enterDrop.highlight('#FB911C'); //flashes orange
},
// Drag Events
onStart: function(el) {
startEl.highlight('#FB911C'); //flashes orange
},
onDrag: function(el) {
dragIndicatorEl.highlight('#FB911C'); //flashes orange
},
onComplete: function(el) {
completeEl.highlight('#FB911C'); //flashes orange
}
});
});
</script>
</head>
<body>
<p align = "center">Drag and Drop Application</p>
<div id = "drag_cont">
<div id = "start" class = "indicator"><span>Start</span></div>
<div id = "drag_ind" class = "indicator"><span>Drag</span></div>
<div id = "complete" class = "indicator"><span>Complete</span></div>
<div id = "enter" class = "indicator"><span>Enter Droppable Element</span></div>
<div id = "leave" class = "indicator"><span>Leave Droppable Element</span></div>
<div id = "drop_in_droppable" class = "indicator">
<span>Dropped in Droppable Element</span>
</div>
<div id = "drag_me">
<div id = "drag_me_handle"><span>HANDLE</span></div>
</div>
<div id = "drop_here" class = "draggable">
<p align = "center">Droppable Area</p>
</div>
</div>
</body>
</html>您将收到以下输出，其中，您必须单击"处理并拖动它".您现在可以在左侧找到通知指示.
输出
