Jquery-ui's draggable detailed

To give an example:

<div class= "box" >

<div id= "Draggable" >

<p>drag Me around</p>

<a class= "Test" >notdrag me</a>

</div>

</div>

How to use:

$ ("#draggable"). Draggable ();

Note: Add jquery and Jquery-ui to two class libraries before using.

Note: jquery 2.0 and above do not support IE6 7 8, so you want to let the browser support the contents of the plugin, please use the following version of jquery2.0.

(a) explanation of specific parameters:

1 zindex:100//Indicates the drag of the drag when the label plus the Z-index value, do not drag when the Z-index value is restored.

2 Containment: "Parent"//indicates that the moved range is for the parent element and does not exceed the parent element.

Containment: ". Box"//indicates that the range of movement is inside the box and does not move outside the box.

3 axis: "x",//indicates that only the x-axis can be moved

Axis: "Y"//indicates that you can move only on the y-axis.

4 Cancel: ". Test"//means the class= "test" tab is dropped

5 cursor: "pointer"//tag when dragging, the state of the mouse.

6 delay: "300"//indicates drag delay when dragging.

7 disabled: "false"//means prohibit or execute.

8 opacity:0.5//To adjust the transparency when dragging

9 Addclass:false//Indicates if class is added

Revert:true//Indicates whether to return to the initial position when stopping;

REVERTDURATION:200//Indicates the time to return to the default setting when it is stopped

How to use:

$ ("#draggable"). Draggable (function () {

ZINDEX:100,

Containment: "Parent",

Axis: "X",

Cancel: ". Test",

......

});

(ii) Explanation of specific events:

Create:function (Event,ui) {//creation, the method of execution, such as adding CSS or something else.

Ui.position represents the coordinate value object of the mouse relative to the current object {Top,left}

Ui.offset represents the coordinate value object {Top,left} of the mouse relative to the current page

}

Drag:function () {//drag-and-drop, the method of execution, such as adding CSS or something else.

}

Start:function () {//At the beginning of the execution method, such as adding CSS or something else.

}

Stop:function () {///stop, the method of execution, such as removing CSS or something else.

}

Specific ways to use events:

$ ("#draggable"). Draggable (function () {

Create:function () {

$ (this). AddClass ("cur");

},

Drag:function () {

$ (this). AddClass ("active");

},

Start:function () {

$ (this). AddClass ("active");

},

Stop:function () {

$ (this). Removeclass ("active");

}

});

(iii) Explanation of specific methods:

Destory Remove drag and drop function,

Disable dragging disabled

Enable drag using

Option

Widgets

Specific ways to use events:

$ ("#draggable"). Draggable (Destory);