Drag and Drop using Drag. Move in MooTools 1.2

Its usage is similar to other plug-ins we have seen: First you use the "new" keyword to create a Drag. move the object and assign it to a variable. Then you can define your options and events. This is all to do, but you must pay attention to the CSS weirdness of IE described in the examples below.
Basic usage
Drag. Move
It is very easy to create your own drag object. Let's just look at the example below in detail. Note how we separate the options and events of our Drag. Move object 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 in particular, but we still need to study some useful options and events. Take a look at the code in the lower part, and then learn the details.
Reference code:
Copy codeThe Code is as follows:
Var myDrag = new Drag. Move (dragElement ,{
// Drag. Move Option
Droppables: dropElement,
Container: dragContainer,
// Drag options
Handle: dragHandle,
// Drag. Move event
// The Drag. Move event will pass the dragged element,
// Droppable)
OnDrop: function (el, dr ){
// Display the id of the element dragged to the accepted element
Alert (dr. get ('id '));
},
// Drag event
// The Drag event transmits the dragged Element
OnComplete: function (el ){
Alert (el. get ('id '));
}
});

Here we will interrupt a little ......
Drag. Move Option
The Drag. Move option has two important elements:
Droppables -- set the selector of an acceptable (droppable) element (this element will register drag-related events)
Container -- set the container for the drag element (ensure that the element remains in the container)
Setting this option is very easy:
Reference code:
Copy codeThe Code is as follows:
// Here we define an element through id
Var dragElement = $ ('drag _ element ');
// Here we define a group of elements through class
Var dropElements =$ $ ('. drag_element ');
Var dragContainer = $ ('drag _ iner ');
// Create our Drag. Move object now
Var myDrag = new Drag. Move (dragElement ,{
// Drag. Move Option
// Assign the droppable defined above to droppables
Droppables: dropElements,
// Assign the element variable of our container to the container
Container: dragContainer
});

Now your element that accepts drag elements is 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, for example, when you start to drag an object or you are about to put it down. Each Drag. Move event will pass the Drag element and the element that accepts the Drag element (we have always called droppable) as the parameter.
OnDrop -- this event is triggered when a drag-and-drop element is placed in an element that accepts the drag element.
OnLeave -- this event will be triggered when a dragged element leaves an element that accepts the dragged element.
OnEnter -- this event is triggered when an element that can be dragged enters an element that can be dragged.
Each event in these events calls a function, and each function is called when the corresponding event is triggered.
Reference code:
Copy codeThe Code is as follows:
Var dragContainer = $ ('drag _ iner ');
Var myDrag = new Drag. Move (dragElement ,{
// Drag. Move Option
Droppables: dropElements,
Container: dragContainer,
// Drag. Move event
// The Drag. Move function will pass the Drag element ('El' in this example ')
// There are also elements that accept the drag element ('Dr 'In this example ')
OnDrop: function (el, dr ){
// The following sentence indicates:
// If the elements you drag are not within the range of elements that can be dragged
If (! Dr ){
// Do nothing
}
// Otherwise (logically speaking,
// If the element you drag is within the range of elements that can be dragged)
// Perform this event
Else {
// Do something here
};
},
OnLeave: function (el, dr ){
// This event will be triggered when the dragged element leaves the element that can be dragged to the object
},
OnEnter: function (el, dr ){
// This event will be triggered when the dragged element enters the element that can be dragged to the object
}
});

Some Drag events and options
There are many options and events for Drag, but here we only look at a small part.
Snap -- Option
The snap option allows you to set at least how many pixels a user's mouse moves before dragging. The default value is 6. You can set the value to a variable of any number or value. Obviously, there are some reasonable restrictions (for example, setting snap to 1000 is useless), but this will be useful in customizing your user experience.
Reference code: [Copy Code] [Save Code]
Var myDrag = new Drag. Move (dragElement ,{
// Drag Option
Snap: 10
});
Handle -- Option
Handle can add a control object to your drag element. This control object will be the only element that can be crawled (dragged), allowing you to use other elements to do something else. To set a control object, you only need to call this element.
Reference code:
Copy codeThe Code is as follows:
// Here we use a class selector to create an array
// This makes it easy to add multiple control objects. If we decide to have multiple elements that can be dragged
Var dragHandle = $ ('drag _ handle ');
Var myDrag = new Drag. Move (dragElement ,{
// Drag Option
Handle: dragHandle
});

OnStart -- event
OnStart is the same as its name. This event is triggered when you start dragging. If you set a large snap, this event will not be triggered until the mouse leaves the element with the specified snap value.
Reference code:
Copy codeThe Code is as follows:
Var myDrag = new Drag. Move (dragElement ,{
// Drag Option
// The Drag option transmits the dragged element as a parameter.
OnStart: function (el ){
// Place it here to do anything you want to do when you start dragging
}
});

OnDarg -- event
This onDrag event will be triggered consecutively when you drag an element.
Reference code:
Copy codeThe Code is as follows:
Var myDrag = new Drag. Move (dragElement ,{
// Drag Option
// The Drag option transmits the dragged element as a parameter.
OnDrag: function (el ){
// Place it here to do anything you want to do when you start dragging
}
});

OnComplete -- event
The onComplete event is triggered when you place a drag element, whether or not you place it inside an element that can be dragged.
Reference code:
Copy codeThe Code is as follows:
Var myDrag = new Drag. Move (dragElement ,{
// Drag Option
// The Drag option transmits the dragged element as a parameter.
OnComplete: function (el ){
// Place it here to do anything you want to do when you start dragging
}
});

Sample Code
Let's combine the code in one way. When different events are triggered, we highlight different contents, and we use the options we see above to configure our Drag. move object:
Reference code:
Copy codeThe Code is as follows:
Window. addEvent ('domainready', 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 dropddrop = $ ('drop _ in_droppable ');
Var myDrag = new Drag. Move (dragElement ,{
// Drag. Move Option
Droppables: dropElement,
Container: dragContainer,
// Drag Option
Handle: dragHandle,
// Drag. Move event
OnDrop: function (el, dr ){
If (! Dr ){}
Else {
Dropddrop. highlight ('# FB911C'); // flashing in Orange
El. highlight ('# fff'); // flashing white
Dr. highlight ('# 667C4A'); // flashing green
};
},
OnLeave: function (el, dr ){
LeaveDrop. highlight ('# FB911C'); // flashing in Orange
},
OnEnter: function (el, dr ){
EnterDrop. highlight ('# FB911C'); // flashing in Orange
},
// Drag event
OnStart: function (el ){
StartEl. highlight ('# FB911C'); // flashing in Orange
},
OnDrag: function (el ){
DragIndicatorEl. highlight ('# FB911C'); // flashing orange
},
OnComplete: function (el ){
CompleteEl. highlight ('# FB911C'); // flashing in Orange
}
});
});

Pay attention to CSS: in IE, to be able to properly register the Drag. Move container, You need to clearly point out its position in the following CSS. The most important thing is that you need to remember to set the position of the container to "position: relative", and set the position of the element to "position: absolute ", then you must set the left and top attributes of the drag element. Now, if you are building and following this rule for other browsers, you can ignore this part:
Reference code:
Copy codeThe Code is as follows:
/* The following definition is usually a good idea */
Body {
Margin: 0
Padding: 0
}
/* Make sure that the element to be dragged has "position: absolute "*/
/* Set the left and top attributes at the beginning */
# Drag_me {
Width: 100px
Height: 100px
Background-color: #333
Position: absolute
Top: 0
Left: 0
}
# Drop_here {
Width: 200px
Height: 200px
Background-color: # eee
}
/* Make sure 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 let's create our HTML:
Reference code:
Copy codeThe Code is as follows:
<Div id = "drag_cont">
<Div id = "start" class = "indicator"> <span> drag start </span> </div>
<Div id = "drag_ind" class = "indicator"> <span> dragging </span> </div>
<Div id = "complete" class = "indicator"> <span> drag to the end </span> </div>
<Div id = "enter" class = "indicator"> <span> enter the Droppable element </span> </div>
<Div id = "leave" class = "indicator"> <span> left the Droppable element </span> </div>
<Div id = "drop_in_droppable" class = "indicator"> <span> put the 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 related chapters in the document:

• Drag
• Drag. Move

Download a zip package containing everything you need

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