Draggable (drag) component properties, events, methods

Source: Internet
Author: User

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
Return Property Object
Returns the drag proxy element if the Proxy property is set
Allow drag
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.