A, class loading
<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red">
Content portion
</ div>
Two, js loaded
$("#box").draggable({}）
Third, about the draggable attribute, events, methods
$("#box").draggable({
//Attributes
revert: true, // set to true, then the stop starting position drag returns, defaults to false
Cursor: 'Move', dragging the CSS style // pointer to move / pointer / text / wait, etc. default Move
handle : '# pos' // begin dragging handle is selected as default null
Disabled: true, // defaults to true stops dragging to false
Edge: 50, // width values can drag the container in which the default is for the number 0
Axis: "V" // set the vertical drag 'v', or the level of 'h' defaults to null
deltaX: 10, // the dragged element corresponding to the current cursor position number default value x is null
deltaY: 10, // dragged to the current cursor position corresponds to the element value of y number defaults to null
Proxy: 'clone',
Proxy: function (Source) {}, // when a 'clone', the clone drag a replacement element. If you specify a function, the custom replacement element.
// Event
onBeforeDrag: function (e) {alert ( ' triggers before the drag!'); // return false; }, will return false cancels the drag
onStartDrag: function (e) {alert ( ' triggered drag!' );},
onDrag: function (E) {Alert ( 'dragging trigger!');} return false if not drag
onStopDrag: function (e) {alert () ' triggered when the drag stop!' ,
onStartDrag: function (e) {console.log ($ ( '# box') draggable ( 'proxy').);}, // and returns a proxy for an element proxy: use with 'clone', which may be output proxy element
});
// Method
console.log ($ ( '# box' ) draggable ( 'options'));. // Returns the attributes of the object
. $ ( '# Box') draggable ( 'disable'); // Disable Drag moving
$ ( '# box') draggable ( 'enable');. // allow drag
$ ( '# Box') draggable ( 'proxy');. // Returns the proxy element