How does the Html5draggable property work with page drag effects? Method Summary Here!

This article is mainly about the technical about the Draggable property to achieve page drag effect, read down, step by step you will find this is not very difficult, now let us come to see this article

This article is to introduce draggable (drag) is the implementation of the page element drag effect, so, step by step.

Loading mode (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, etc.    handle: ' #pox ',       //handle, set only after setting the current element to implement drag    Disabled:false,       // Set whether the edge:50 can be dragged    ,          //Set the border to a large distance can be dragged    axis: ' V ',          //Set drag direction, V: Vertical Drag, H: Horizontal drag    proxy: ' Clone ',        //Set proxy element, use clone to copy the current element    deltax:10,         //Drag the top left corner of the element distance from the x-axis direction of the current cursor    deltay:10,         // The distance      proxy:function (source) {    //Custom proxy element    var p = $ (' <div style= "border:1px solid) that is dragged from the upper-left corner of the element to the y-axis direction of the current cursor    #ccc; width:400px;height:200px; " ></div> ');    p.html (source). HTML ()). AppendTo (' body ');    return p;    },//html part <div id= "box" style= "width:400px;height:200px;background:red;" >    Content Section </div>

Ii. Events (second, events)

Occurs before 1.onBeforeDrag drag

$ (' #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.

Occurs when the 2.onStartDrag 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 drag-and-drop process execution

$ (' #box '). Draggable ({    ondrag:function (e) {        alert (' triggered during drag! ');    }}); In the drag

Executes when the mouse moves and returns false when it cannot be dragged

4.onStopDrag occurs after a drag is stopped

$ (' #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 used in combination, the order of execution is Onbeforedrag-----Onbeforedrag---Ondrag Onstopdrag

$ (' #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! ');},});

Iii. methods (third, methods)

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 is the last setting)

This property is shared by all drag-and-drop on the current page after a single set-up.

$ (function () {    $.fn.draggable.defaults.cursor = ' text ';});

The above is this article about the Draggable property page drag aspects of the whole content (want to learn more on the topic.alibabacloud.com), there are questions can be asked below.