Drag.Move in MooTools 1.2 to implement drag and drop_Mootools

Its usage is similar to other plugins we have seen: first you create a Drag.Move object using the "new" keyword and assign it to a variable, then you define your options and events. That's all there is to it, but you must be aware of IE's CSS quirks described in the example below.
Basic Usage
Drag.Move
Creating your own drag objects is very easy. Just take a look at the example below. Notice how we separated our Drag.Move object's options and events from our Drag options and events. The Drag.Move class extends the Drag class so it can accept the options and events of the Drag class. Today we are not going to talk about the Drag class specifically, but we still want to look at some useful options and events. Take a look at the code below and learn the details.
Reference code:

Copy code The code is as follows:

var myDrag = new Drag. Move(dragElement, {
// Options for Drag.Move
droppables: dropElement,
container: dragContainer,
// Options for Drag
handle: dragHandle,
// Drag .Move event
// The Drag.Move event will pass the dragged element,
// There are also elements that can accept the dragged element (droppable)
onDrop: function(el, dr) {
// Display the id of the element dragged to the acceptable element
alert(dr.get('id'));
},
// Drag event
// Drag event delivery Dragged element
onComplete: function(el) {
alert(el.get('id'));
}
});

here Let's interrupt for a moment...
Drag.Move option
Drag.Move option has two very important elements:
droppables - Set the selector for droppable elements (this element will Drag-related events will be registered)
container - Set the container for the dragged element (to ensure that the element is always within the container)
Setting this option is very easy:
Reference code:

Copy code The code is as follows:

// Here we define an element by id
var dragElement = $ ('drag_element');
// Here we define a set of elements through class
var dropElements = $$('.drag_element');
var dragContainer = $('drag_container');
// Now create our Drag.Move object
var myDrag = new Drag.Move(dragElement , {
// Drag.Move options
// Assign the droppable we defined above to droppables
droppables: dropElements ,
// Assign our container element variable to the container
container: dragContainer
});

Now your element accepts draggable elements That's included, and you have a class that accepts drag-and-drop elements.
Drag.Move event
This event allows you to trigger a function at different points, such as when you start dragging an object or when you are ready to drop it. Each Drag.Move event will pass the drag element and the element that accepts the drag element (we always call it droppable) as parameters.
onDrop - This event will be fired when a draggable element is dropped inside an element that accepts a draggable element.
onLeave - This event will be fired when a draggable element leaves an element that accepts a draggable element.
onEnter - This event will be fired when a draggable element enters an element that accepts a draggable element.
Each of these events will call a function, and each function will be called when the corresponding event fires.
Reference code:

Copy code The code is as follows:

var dragContainer = $(' drag_container');
var myDrag = new Drag.Move(dragElement , {
// Drag.Move options
droppables: dropElements ,
container: dragContainer ,
// Drag.Move event
// The Drag.Move function will be passed the draggable element ('el' in this example)
// And the element that accepts the draggable element ('dr' in this example)
onDrop: function(el, dr) {
// The following sentence probably means:
// If the element you drag is not within the range of elements that can accept the dragged element
if ( !dr) {
// Do nothing
}
// Otherwise (logically speaking,
// if the element you are dragging reaches an element that accepts dragging elements within the scope)
// Do this event
else {
// Do something here
};
},
onLeave: function(el, dr) {
// This event will be triggered when the dragged element leaves the element that accepts the drag object.
},
onEnter: function(el, dr) {
// This event will be triggered when the dragged element leaves the element that accepts the drag object. Triggered when the moving element enters an element that accepts dragging objects
}
});

Some Drag events and options
For Drag, there are many options and events, but we only look at a small part here.
snap - option The
snap option allows you to set the minimum number of pixels the user's mouse moves before starting dragging. The default is 6, but you can set it to any number or variable whose value is a number. Obviously, there are some reasonable limits here (for example, setting snap to 1000 will be useless), but this will come in handy when customizing your user experience.
Reference code: [Copy code] [Save code]
var myDrag = new Drag.Move(dragElement, {
// Drag options
snap: 10
});
handle - The option
handle adds a control object to your drag element. This control object will become the only element that can be "grabbed" (dragged), allowing you to do other things with other elements. To set a control object, just call this element.
Reference code:

Copy code The code is as follows:

// Here we use A class selector creates an array
// This will allow us to easily add multiple control objects if we decide to have multiple elements that can accept dragging elements
var dragHandle = $('drag_handle ');
var myDrag = new Drag.Move(dragElement, {
// Drag options
handle: dragHandle
});

onStart——Event
onStart is just like its name, this event is triggered when dragging starts. If you set a large snap, this event will not fire until the mouse is farther away from the element than the specified snap value.
Reference code:

Copy code The code is as follows:

var myDrag = new Drag. Move(dragElement, {
// Drag option
// Drag option will pass the dragged element as a parameter
onStart: function(el) {
// Place it here when starting dragging Anything you want to do
}
});

onDarg - event
This onDrag event will be triggered continuously when you drag an element.
Reference code:

Copy code The code is as follows:

var myDrag = new Drag. Move(dragElement , {
//Drag option
//Drag option will pass the dragged element as a parameter
onDrag: function(el) {
//Place it here when you start dragging Anything you want to do
}
});

onComplete - Event
Finally there is the onComplete event which will fire when you drop a dragged element regardless Have you placed it inside an element that accepts draggable elements.
Reference code:

Copy code The code is as follows:

var myDrag = new Drag. Move(dragElement, {
// Drag option
// Drag option will pass the dragged element as a parameter
onComplete: function(el) {
// Place it here when you start dragging Anything you want to do
}
});

Code Example
Let’s combine the code just now in a way that when different events trigger , we highlight different content, and we configure our Drag.Move object using the options we saw above:
Reference code:

Copy code The code is as follows:

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：
参考代码：

复制代码 代码如下:

拖动开始

拖动中

拖动结束

进入了Droppable元素

离开了Droppable元素

放进了Droppable元素

控制对象

Learn more…

Here are some relevant sections from the document:

• Drag
• Drag.Move

Download a zip package with everything you need to get started

Contains the MooTools 1.2 core library, the MooTools 1.2 extension library, an external JavaScript file containing your functions, an external CSS file defining your styles, a simple HTML file and the example above.