Draggable (drag) component properties, events, methods

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