Draggable (drag) component

1 A. Load mode 2  //34 <div id= "box" class= "easyui-draggable" style= " width:400px;height:200px;background:red; " > Content Section </div>567//JS load call 89  $ (' #box '). draggable ();

Load Mode

Property List

property settings

$ (' #box '). Draggable ({

Revert:true,

Cursor: ' Text ',

Handle: ' #pox ',

Disabled:false,

EDGE:50,

Axis: ' V ',

Proxy: ' Clone ',

Deltax:10,

Deltay:10,

Proxy:function (source) {

var p = $ (' <div style= "border:1px solid #ccc; width:400px;height:200px;" ></div> ');

p.html (source). HTML ()). AppendTo (' body ');

return p;

},

});

Event List

$ (' #box '). Draggable ({

Onbeforedrag:function (e) {

Alert (' Drag before triggering! ‘);

return false;

},

Onstartdrag:function (e) {

Alert (' Trigger when dragging! ‘);

},

Ondrag:function (e) {

Alert (' Trigger during drag! ‘);

},

Onstopdrag:function (e) {

Alert (' Trigger when drag is stopped! ‘);

},

});

Draggable method

Return Property Object

Console.log ($ (' #box '). draggable (' options '));

Returns the agent element

Onstartdrag:function (e) {

Console.log ($ (' #box '). Draggable (' proxy '));

},

Prohibit dragging

$ (' #box '). Draggable (' disable ');

Allow drag and drop

$ (' #box '). Draggable (' Enable ');

PS: We can use $.fn.draggable.defaults to override the default value object.

$.fn.draggable.defaults.cursor = ' text ';

Draggable (drag) component