📅 最后修改于: 2020-10-22 06:33:15 🧑 作者: Mango
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相关的事件上注册的元素）的选择器。
container-可以帮助您设置拖动元素的容器（将元素保留在内部）。
snap-这可帮助您设置用户在可拖动元素开始拖动之前必须将光标拖动多少像素。默认值为6，您可以将其设置为代表数字的任意数量的变量。
handle-这可以帮助您向可拖动元素添加一个手柄。句柄成为唯一将接受抓取的元素。
查看以下语法，了解如何以及在何处定义可放置和容器，捕捉和处理元素。
//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
}
});
当您将可拖动元素拖放到可放置元素时，将引发一个事件。看一下下面的语法。
句法
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指的是何时放置可放置对象，它会提高是否落入可放置对象。看一下下面的语法。
句法
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.Move，onEnter，onLeave，onDrop，onStart，onDrag和onComplete。在此示例中，我们提供了一个HANDLE，使用它可以将可拖动对象拖到容器中的任何位置。对于每个操作，左侧都有一个通知（蓝色表示）。容器中有一个Droppable区域。如果“可拖动”对象进入“可放置”区域，则将激活最后三个指示符。看一下下面的代码。
例
Drag and Drop Application
Start
Drag
Complete
Enter Droppable Element
Leave Droppable Element
Dropped in Droppable Element
HANDLE
Droppable Area
您将收到以下输出，其中，您必须单击Handle并将其拖动。现在，您可以在左侧找到通知指示。
输出