JQuery Easy UI Draggable (drag) component, jquerydraggable

JQuery Easy UI Draggable (drag) component, jquerydraggable

As mentioned above, jQuery EasyUI plug-in references are usually used in two ways (excluding the easyload Loading Method). Therefore, the Draggable component to be summarized in this article also has two loading methods:

(1) Use the class loading method:

<Div id = "box" class = "easyui-draggable" style = "width: 400px; height: 200px; background: red;">
Content
</Div>

(2) JS loading and calling

$ ('# Box'). draggable ();

As mentioned above, using the class attribute is not conducive to expanding other attributes of the component. Therefore, we use the JS call method, and the subsequent articles also use the JS call method.

This component has several attributes, methods, and trigger events, which are not listed here. They are all put in the sample code and annotated.

Example:

<! DOCTYPE html> 
Click to download source code


Kneeling a familiar jquery-ui-1820customminjs jquery ui jquery, how to set the Element Object to disable dragging draggable
You can write this line of code in its constructor, that is, it cannot be dragged for a lifetime of achievements.

The drag range of jQuery UI
You can set containment at the beginning.
$ (Function (){
$ ("# Draggable5"). draggable ({
'Containing': [x1, y1, x2, y2]
});
});

Called when x1, y1, x2, y2 changes
$ ("# Draggable5"). draggable ("option", "containment", [x1, y1, x2, y2]);