Drag.move in MooTools 1.2 to implement drag-and-drop _mootools

It's used like other plug-ins we've seen: first you use the "new" keyword to create a Drag.move object and assign it to a variable, and then you define your options and events. That's all you have to do, but you have to pay attention to the CSS quirks of IE described in the following example.
Basic usage
Drag.move
It's very easy to create your own drag object. Just take a look at the example below. Notice how we separate the options and events of our Drag.move objects from our drag options and events. The Drag.move class extends the Drag class, so it can accept options and events for the Drag class. Today we are not going to specifically talk about the drag class, but we still need to look at some useful options and events. Take a look at the code below and learn the details.
Reference code:

Copy Code code as follows:

var Mydrag = new Drag.move (dragelement, {
Options for Drag.move
Droppables:dropelement,
Container:dragcontainer,
Options for drag
Handle:draghandle,
Drag.move's Events
The Drag.move event passes the dragged element.
There are also elements that can accommodate drag elements (droppable)
Ondrop:function (el, Dr) {
Displays the ID of the element dragged to the acceptable element
Alert (dr.get (' id '));
},
Drag events
Drag event-Passing dragged elements
Oncomplete:function (EL) {
Alert (el.get (' id '));
}
});

Here we interrupt a little bit ...
Drag.move Options
The Drag.move option has two very important elements:
droppables--sets the selector for the acceptable (droppable) element (this element will register the drag-related event)
container--sets the container for dragging elements (you can guarantee that the element is always in the container)
Setting this option is very easy:
Reference code:

Copy Code code as follows:

Here we define an element by ID
var dragelement = $ (' drag_element ');
Here we define a set of elements by 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 variables to the container
Container:dragcontainer
});

Now that the elements of your acceptable drag element are included, you have a class that can accept drag-and-drop elements.
Drag.move Events
This event allows you to trigger a function at a different point, such as when you start dragging an object or you are ready to drop it. Each Drag.move event passes the drag element and the element that accepts the drag element (which we have always called droppable) as an argument.
ondrop--This event will be triggered when a drag element is placed inside an element that accepts a drag element.
onleave--This event fires when a drag element leaves an element that accepts a drag element.
onenter--This event will be triggered when a drag element enters an element that accepts a drag element.
Each of these events will call a function, and each function will be invoked when the corresponding event is triggered.
Reference code:

Copy Code code as follows:

var Dragcontainer = $ (' Drag_container ');
var Mydrag = new Drag.move (dragelement, {
Drag.move Options
Droppables:dropelements,
Container:dragcontainer,
Drag.move Events
The Drag.move function will pass the dragged element (in this case, ' el ')
There are also elements that accept the drag element (in this case, ' Dr ')
Ondrop:function (el, Dr) {
The meaning of the following sentence is probably:
If you drag an element that is not in the range of elements that can accept a drag element
if (!DR) {
Don't do anything.
}
Otherwise (logically speaking,
If the element you dragged is within the range of elements that can accept the drag element.
Do this event
else {
To do something here.
};
},
Onleave:function (el, Dr) {
This event triggers when the dragged element leaves an element that is an acceptable drag object.
},
Onenter:function (el, Dr) {
This event triggers when the dragged element enters an element that can accept the dragged object.
}
});

Some drag events and options
There are a number of options and events for drag, but here we look at only a few.
snap--Options
The snap option lets you set the user's mouse to move at least a few pixels and start dragging. The default is 6, and you can set it to any number or variable that has a number value. Obviously, there are some reasonable restrictions (such as 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--Options
Handle can add a control object to your drag element. This control object will be the only element that can accept the "crawl" (drag), allowing you to use other elements to do something else. To set a control object, simply call this element.
Reference code:

Copy Code code as follows:

Here we use a class selector to build an array
This makes it easy to add multiple control objects if we decide to have more than one element to accept the drag element
var draghandle = $ (' drag_handle ');
var Mydrag = new Drag.move (dragelement, {
Drag options
Handle:draghandle
});

onstart--Events
OnStart, like its name, triggers this event when a drag is started. If you set a large snap, this event will not trigger until the mouse leaves the element with the specified snap value.
Reference code:

Copy Code code as follows:

var Mydrag = new Drag.move (dragelement, {
Drag options
The drag option passes the dragged element as a parameter
Onstart:function (EL) {
Here's what you'll do when you start dragging.
}
});

ondarg--Events
This Ondrag event will be triggered sequentially as you drag an element.
Reference code:

Copy Code code as follows:

var Mydrag = new Drag.move (dragelement, {
Drag options
The drag option passes the dragged element as a parameter
Ondrag:function (EL) {
Here's what you'll do when you start dragging.
}
});

oncomplete--Events
Finally, the OnComplete event is triggered when you drop a drag element, regardless of whether you put it inside an element that can accept the drag element.
Reference code:

Copy Code code as follows:

var Mydrag = new Drag.move (dragelement, {
Drag options
The drag option passes the dragged element as a parameter
Oncomplete:function (EL) {
Here's what you'll do when you start dragging.
}
});

code example
Let's put this code together in one way, when different events are triggered, we highlight the different content, and we use the options we see above to configure our Drag.move object:
Reference code:

Copy Code code 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 Options
Droppables:dropelement,
Container:dragcontainer,
Drag options
Handle:draghandle,
Drag.move Events
Ondrop:function (el, Dr) {
if (!DR) {}
else {
Dropdrop.highlight (' #FB911C '); Orange Flashing
El.highlight (' #fff '); White flashing
Dr.highlight (' #667C4A '); Green Flashing
};
},
Onleave:function (el, Dr) {
Leavedrop.highlight (' #FB911C '); Orange Flashing
},
Onenter:function (el, Dr) {
Enterdrop.highlight (' #FB911C '); Orange Flashing
},
Drag events
Onstart:function (EL) {
Startel.highlight (' #FB911C '); Orange Flashing
},
Ondrag:function (EL) {
Dragindicatorel.highlight (' #FB911C '); Orange Flashing
},
Oncomplete:function (EL) {
Completeel.highlight (' #FB911C '); Orange Flashing
}
});
});

Note css: In IE, in order to be able to properly register the Drag.move container, you need to explicitly indicate its location in the following CSS. The most important thing is that you need to remember to set the container's location to "position:relative", while setting the element to drag is "Position:absolute", and then be sure to set the left and top properties of the drag element. Now, if you are building and following this rule for other browsers, you can ignore this section:
Reference code:

Copy Code code as follows:

/* The following definition is usually a good idea * *
Body {
margin:0
padding:0
}
/* Make sure the element that can be dragged has "position:absolute" * *
/* and set the left and top properties at start
#drag_me {
width:100px
height:100px
Background-color: #333
Position:absolute
top:0
left:0
}
#drop_here {
width:200px
height:200px
Background-color: #eee
}
/* Ensure that the dragged container has "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
}

Now we're going to build our HTML:
Reference code:

Copy Code code as follows:

<div id= "Drag_cont" >
<div id= "Start" class= "indicator" ><span> drag start </span></div>
<div id= "Drag_ind" class= "indicator" ><span> drag </span></div>
<div id= "complete" class= "indicator" ><span> drag end </span></div>
<div id= "Enter" class= "indicator" ><span> entered droppable element </span></div>
<div id= "Leave" class= "indicator" ><span> left droppable element </span></div>
<div id= "drop_in_droppable" class= "indicator" ><span> put in droppable element </span></div>
<div id= "Drag_me" >
<div id= "Drag_me_handle" ><span> control object </span></div>
</div>
<div id= "Drop_here" class= "draggable" > </div>
</div>

Learn more ...

Here are some of the relevant chapters in the document:

• Drag
• Drag.move

Download a Zip package that contains everything you need to start

Contains the MooTools 1.2 core library, the MooTools 1.2 extension library, an external JavaScript file that contains your functions, an external CSS file that defines your style, a simple HTML file, and an example above.