Draggable ( drag ) implements the drag effect of the page element.
First, loading mode
1.CSS Style Loading:
<div id= "box" class= "easyui-draggable" style= "Width:200px;height:150px;background: #F5F6F7;" > Content Section </div>
Use CSS style to load draggable, convenient and quick, but not conducive to management, so we have a lesson the second way to load, using the jquery way to load, we will generally use jquery to load.
2.Jquery Mode loading:
Do not add the attribute $ (' #box '). draggable ();//js part $ (' #box '). Draggable ({ revert : true, //whether to return to start position after dragging, Boolean type cursor : ' Text ', //mouse drag style, cross, text handle : ' # Pox ', //handle, set only after setting the current element to implement drag disabled : false, //settings can be dragged edge : 50, //set the boundary to the inside how much distance can be implemented drag axis : ' V ', //set drag direction, V: Vertical Drag, H: Horizontal drag proxy: ' Clone ', //set proxy element, copy current element when using clone deltax : 10, // The distance from the upper-left corner of the dragged element to the x-axis of the current cursor &NBSP;&NBsp; deltay : 10, // The distance proxy: function (source) of the upper-left corner of the dragged element from the y-axis direction of the current cursor { //Custom proxy element var p = $ (' <div style= ' border:1px solid #ccc; width:400px;height:200px; " ></div> '); p.html (source). HTML ()). AppendTo (' body '); RETURN&NBSP;P;&NBSP;&NBSP;&NBSP;&NBSP,},//html part <div id= "box" style= "width:400px;height:200px; background:red; " > Content Section </div>
II. Events
1.Onbeforedrag occurs before dragging
$ (' #box '). Draggable ({onbeforedrag:function (e) {alert (' Trigger before dragging! ‘); return false; }});
Occurs before a drag, when the mouse clicks on the element, when the return false will not be dragged, we will not let it directly return false, because it does not have any meaning, when used should have sufficient logic to judge.
2.Onstartdrag occurs when drag starts
$ (' #box '). Draggable ({onstartdrag:function (e) {alert (' Trigger when drag starts! ‘); return false; }});
After the mouse click to drag the instant execution, the execution time after Onbeforedrag.
3.Ondrag the execution during drag and drop
$ (' #box '). Draggable ({ondrag:function (e) {alert (' triggered during drag! ‘); }});
Executes during drag, when the mouse moves and returns false when it cannot be dragged
4.Onstopdrag occurs after dragging stops
$ (' #box '). Draggable ({onstopdrag:function (e) {alert (' triggers when dragging stops!) ‘); }});
Triggered when the drag is finished, which executes when the mouse is released, with no return value.
5. The above events can be combined, with the order of execution onbeforedrag-->
$ (' #box '). Draggable ({onbeforedrag:function (e) {alert (' Trigger before dragging! ‘); return false; }, Onstartdrag:function (e) {alert (' Trigger on drag! ‘); }, Ondrag:function (e) {alert (' triggered during drag! ‘); }, Onstopdrag:function (e) {alert (' triggers when dragging stops! ‘);},});
Third, the method
Method Name
|
Description |
Option
|
Return Property Object
|
Proxy
|
Returns the drag proxy element if the Proxy property is set
|
Enabl
|
Allow drag
|
Disable
|
Prohibit dragging
|
Returns the Property object Console.log ($ (' #box '). draggable (' options '));//returns the proxy element Onstartdrag:function (e) {Console.log ($ (' #box '). Draggable (' proxy '));},//prohibit dragging $ (' #box '). Draggable (' disable ');//Allow drag and drop of $ (' #box '). Draggable (' Enable ');
Iv. setting default Properties
This property is shared by all drag-and-drop on the current page after a single set-up.
$ (function () {$.fn.draggable.defaults.cursor = ' text ';});
This article is from the "Idlong" blog, make sure to keep this source http://idlong.blog.51cto.com/10631184/1685710
Draggable (drag) component properties, events, methods