It is used similar to other plugins we have seen: first you use the "new" keyword to create an object and assign it to a variable, and then you define your options and events. This is all to do, but you must pay attention to the weird CSS phenomenon of IE described in the example below.
Basic usage
Creating your own drag object is very easy. Just take a look at the following examples. Note how we separate the options and events of our objects from our Drag options and events. The class extends the Drag class, so it can accept 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 below and learn the details.
Reference code:
var myDrag = new (dragElement, {
// option
droppables: dropElement,
container: dragContainer,
// Drag options
handle: dragHandle,
// Events
// Events will pass dragged elements.
// There are also droppable elements that can accept drag elements (droppable)
onDrop: function(el, dr) {
// Show the id of the element that drags to the acceptable element
alert(('id'));
},
// Drag event
// Drag event passes dragged elements
onComplete: function(el) {
alert(('id'));
}
});
Let's interrupt a little here...
Options
There are two important elements for the option:
droppables - Set the selector for the acceptable droppable element (this element will register drag-related events)
container - set the container for dragging elements (can ensure that the elements are always in the container)
Setting this option is very easy:
Reference code:
// Here we define an element through id
var dragElement = $('drag_element');
// Here we define a set of elements through class
var dropElements = $$('.drag_element');
var dragContainer = $('drag_container');
// Create our object now
var myDrag = new (dragElement , {
// Options
// Assign the droppable we defined above to droppables
droppables: dropElements ,
// Assign our container element variable to the container
container: dragContainer
});
Now that your element that accepts drag elements is included, you have a class that can accept drag and drop elements.
event
This event allows you to trigger a function at different points, such as when you start dragging an object or you are ready to drop it. Each event will pass the drag element and the element that accepts the drag element (which we have always called droppable) as parameters.
onDrop - This event will be fired when a draggable element is placed inside an element that accepts the dragged element.
onLeave—This event will be fired when a draggable element leaves an element that accepts the dragged element.
onEnter - This event will be triggered when a draggable element enters an element that accepts the dragged element.
Each of these events will call a function, and each function will be called when the corresponding event is triggered.
Reference code:
var dragContainer = $('drag_container');
var myDrag = new (dragElement , {
// Options
droppables: dropElements ,
container: dragContainer ,
// event
// The function will pass draggable elements (in this example, 'el')
// There are elements that accept drag elements (in this example, 'dr')
onDrop: function(el, dr) {
// The following sentence roughly means:
// If the element you are dragging is not within the range of the element that can accept dragging elements
if (!dr) {
// Do nothing
}
// Otherwise (logically,
// If the element you dragged reaches the range of elements that can be dragged)
// Do this incident
else {
// Do something here
};
},
onLeave: function(el, dr) {
// This event will be fired when the dragged element leaves the element that can accept the dragging object
},
onEnter: function(el, dr) {
// This event will be triggered when the dragged element enters an element that can accept the dragged object
}
});
Some Drag events and options
For Drag, there are many options and events, but here we only look at a small part.
snap-option
The snap option allows you to set how many pixels the user's mouse moves at least and then start dragging. The default is 6, and you can set it to any number or variable with a value of digit. Obviously, there are some reasonable restrictions here (like 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 (dragElement , {
// Drag option
snap: 10
});
handle—Options
The handle can add a control object to your drag element. This control object will become the only element that can accept "crawl" (drag), allowing you to do something else with other elements. To set up a control object, just call this element.
Reference code:
// Here we use a class selector to create an array
// This will make it easy for us to add multiple control objects if we decide we want to have multiple elements that can accept drag elements
var dragHandle = $('drag_handle');
var myDrag = new (dragElement , {
// Drag option
handle: dragHandle
});
onStart – Event
onStart is the same as its name, triggering this event when it starts 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:
var myDrag = new (dragElement , {
// Drag option
// Drag option will pass the dragged element as a parameter
onStart: function(el) {
// Place here whatever you want to do when you start dragging
}
});
onDarg——event
This onDrag event will be triggered continuously when you drag an element.
Reference code:
var myDrag = new (dragElement , {
// Drag option
// Drag option will pass the dragged element as a parameter
onDrag: function(el) {
// Place here whatever you want to do when you start dragging
}
});
onComplete—event
Finally, the onComplete event will be fired when you drop a drag element, regardless of whether you put it inside an element that can accept drag elements.
Reference code:
var myDrag = new (dragElement , {
// Drag option
// Drag option will pass the dragged element as a parameter
onComplete: function(el) {
// Place here whatever you want to do when you start dragging
}
});
Code Example
Let's combine the codes just now in a way, when different events are triggered, we highlight different contents, and we use the options we see above to configure our object:
Reference code:
('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 (dragElement, {
// Options
droppables: dropElement,
container: dragContainer,
// Drag option
handle: dragHandle,
// event
onDrop: function(el, dr) {
if (!dr) { }
else {
('#FB911C'); //Orange flashes
('#ffff'); //White flashing
('#667C4A'); //The green flashes
};
},
onLeave: function(el, dr) {
('#FB911C'); //Orange flashes
},
onEnter: function(el, dr) {
('#FB911C'); //Orange flashes
},
// Drag event
onStart: function(el) {
('#FB911C'); //Orange flashes
},
onDrag: function(el) {
('#FB911C'); //Orange flashes
},
onComplete: function(el) {
('#FB911C'); //Orange flashes
}
});
});
Note the CSS: In IE, in order to be able to register a container appropriately, you need to clearly indicate its location in the CSS below. The most important thing is that you need to remember to set the position of the container to "position: relative" and the position of the draggable element to "position: absolute", and then be sure to set the left and top properties of the draggable element. Now, if you are building for another browser and following this rule, you can ignore this section:
Reference code:
/* The following definition is usually a good idea */
body {
margin: 0
padding: 0
}
/* Make sure that the draggable elements have "position: absolute" */
/* and set the left and top properties 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 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 build our HTML:
Reference code:
<div >
<div class="indicator"><span>Drag to start</span></div>
<div class="indicator"><span>Drag</span></div>
<div class="indicator"><span>Drag ends</span></div>
<div class="indicator"><span>Enter the Droppable element</span></div>
<div class="indicator"><span>Leaves the Droppable element</span></div>
<div class="indicator"><span>Put the Droppable element</span></div>
<div >
<div ><span>Control Object</span></div>
</div>
<div class="draggable"> </div>
</div>
Basic usage
Creating your own drag object is very easy. Just take a look at the following examples. Note how we separate the options and events of our objects from our Drag options and events. The class extends the Drag class, so it can accept 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 below and learn the details.
Reference code:
Copy the codeThe code is as follows:
var myDrag = new (dragElement, {
// option
droppables: dropElement,
container: dragContainer,
// Drag options
handle: dragHandle,
// Events
// Events will pass dragged elements.
// There are also droppable elements that can accept drag elements (droppable)
onDrop: function(el, dr) {
// Show the id of the element that drags to the acceptable element
alert(('id'));
},
// Drag event
// Drag event passes dragged elements
onComplete: function(el) {
alert(('id'));
}
});
Let's interrupt a little here...
Options
There are two important elements for the option:
droppables - Set the selector for the acceptable droppable element (this element will register drag-related events)
container - set the container for dragging elements (can ensure that the elements are always in the container)
Setting this option is very easy:
Reference code:
Copy the codeThe code is as follows:
// Here we define an element through id
var dragElement = $('drag_element');
// Here we define a set of elements through class
var dropElements = $$('.drag_element');
var dragContainer = $('drag_container');
// Create our object now
var myDrag = new (dragElement , {
// Options
// Assign the droppable we defined above to droppables
droppables: dropElements ,
// Assign our container element variable to the container
container: dragContainer
});
Now that your element that accepts drag elements is included, you have a class that can accept drag and drop elements.
event
This event allows you to trigger a function at different points, such as when you start dragging an object or you are ready to drop it. Each event will pass the drag element and the element that accepts the drag element (which we have always called droppable) as parameters.
onDrop - This event will be fired when a draggable element is placed inside an element that accepts the dragged element.
onLeave—This event will be fired when a draggable element leaves an element that accepts the dragged element.
onEnter - This event will be triggered when a draggable element enters an element that accepts the dragged element.
Each of these events will call a function, and each function will be called when the corresponding event is triggered.
Reference code:
Copy the codeThe code is as follows:
var dragContainer = $('drag_container');
var myDrag = new (dragElement , {
// Options
droppables: dropElements ,
container: dragContainer ,
// event
// The function will pass draggable elements (in this example, 'el')
// There are elements that accept drag elements (in this example, 'dr')
onDrop: function(el, dr) {
// The following sentence roughly means:
// If the element you are dragging is not within the range of the element that can accept dragging elements
if (!dr) {
// Do nothing
}
// Otherwise (logically,
// If the element you dragged reaches the range of elements that can be dragged)
// Do this incident
else {
// Do something here
};
},
onLeave: function(el, dr) {
// This event will be fired when the dragged element leaves the element that can accept the dragging object
},
onEnter: function(el, dr) {
// This event will be triggered when the dragged element enters an element that can accept the dragged object
}
});
Some Drag events and options
For Drag, there are many options and events, but here we only look at a small part.
snap-option
The snap option allows you to set how many pixels the user's mouse moves at least and then start dragging. The default is 6, and you can set it to any number or variable with a value of digit. Obviously, there are some reasonable restrictions here (like 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 (dragElement , {
// Drag option
snap: 10
});
handle—Options
The handle can add a control object to your drag element. This control object will become the only element that can accept "crawl" (drag), allowing you to do something else with other elements. To set up a control object, just call this element.
Reference code:
Copy the codeThe code is as follows:
// Here we use a class selector to create an array
// This will make it easy for us to add multiple control objects if we decide we want to have multiple elements that can accept drag elements
var dragHandle = $('drag_handle');
var myDrag = new (dragElement , {
// Drag option
handle: dragHandle
});
onStart – Event
onStart is the same as its name, triggering this event when it starts 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 the codeThe code is as follows:
var myDrag = new (dragElement , {
// Drag option
// Drag option will pass the dragged element as a parameter
onStart: function(el) {
// Place here whatever you want to do when you start dragging
}
});
onDarg——event
This onDrag event will be triggered continuously when you drag an element.
Reference code:
Copy the codeThe code is as follows:
var myDrag = new (dragElement , {
// Drag option
// Drag option will pass the dragged element as a parameter
onDrag: function(el) {
// Place here whatever you want to do when you start dragging
}
});
onComplete—event
Finally, the onComplete event will be fired when you drop a drag element, regardless of whether you put it inside an element that can accept drag elements.
Reference code:
Copy the codeThe code is as follows:
var myDrag = new (dragElement , {
// Drag option
// Drag option will pass the dragged element as a parameter
onComplete: function(el) {
// Place here whatever you want to do when you start dragging
}
});
Code Example
Let's combine the codes just now in a way, when different events are triggered, we highlight different contents, and we use the options we see above to configure our object:
Reference code:
Copy the codeThe code is as follows:
('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 (dragElement, {
// Options
droppables: dropElement,
container: dragContainer,
// Drag option
handle: dragHandle,
// event
onDrop: function(el, dr) {
if (!dr) { }
else {
('#FB911C'); //Orange flashes
('#ffff'); //White flashing
('#667C4A'); //The green flashes
};
},
onLeave: function(el, dr) {
('#FB911C'); //Orange flashes
},
onEnter: function(el, dr) {
('#FB911C'); //Orange flashes
},
// Drag event
onStart: function(el) {
('#FB911C'); //Orange flashes
},
onDrag: function(el) {
('#FB911C'); //Orange flashes
},
onComplete: function(el) {
('#FB911C'); //Orange flashes
}
});
});
Note the CSS: In IE, in order to be able to register a container appropriately, you need to clearly indicate its location in the CSS below. The most important thing is that you need to remember to set the position of the container to "position: relative" and the position of the draggable element to "position: absolute", and then be sure to set the left and top properties of the draggable element. Now, if you are building for another browser and following this rule, you can ignore this section:
Reference code:
Copy the codeThe code is as follows:
/* The following definition is usually a good idea */
body {
margin: 0
padding: 0
}
/* Make sure that the draggable elements have "position: absolute" */
/* and set the left and top properties 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 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 build our HTML:
Reference code:
Copy the codeThe code is as follows:
<div >
<div class="indicator"><span>Drag to start</span></div>
<div class="indicator"><span>Drag</span></div>
<div class="indicator"><span>Drag ends</span></div>
<div class="indicator"><span>Enter the Droppable element</span></div>
<div class="indicator"><span>Leaves the Droppable element</span></div>
<div class="indicator"><span>Put the Droppable element</span></div>
<div >
<div ><span>Control Object</span></div>
</div>
<div class="draggable"> </div>
</div>
Learn more...
Here are some related chapters in the documentation:
- Drag
Download a zip package with everything you need to start
Contains the MooTools 1.2 core library, the MooTools 1.2 extension library, an external JavaScript file containing your functions, an external CSS file that defines your style, a simple HTML file and the example above.