Drag and Drop of jQueryUI

JQueryUI is a WebUI code library officially supported by JQuery. It contains underlying interaction, animation, special effects, and other APIs, and encapsulates some Web widgets ). At the same time, JQueryUI inherits the support of jquery plug-ins. A large number of third-party plug-ins can enrich JQueryUI functions. The APIS provided by JQueryUI greatly simplify the development of the drag and drop function. Only minutes required

JQuery UI is a WebUI code library officially supported by JQuery. It contains underlying interaction, animation, special effects, and other APIs, and encapsulates some Web widgets ). At the same time, JQueryUI inherits the support of jquery plug-ins. A large number of third-party plug-ins can enrich JQuery UI functions.
The APIS provided by JQueryUI greatly simplify the development of the drag and drop function. You only need to call the draggable and droppable functions on the source and target respectively.

Drag Principle

First, we need to clarify several concepts.
Ource: drag the source, the element to be dragged.
Taerget: drag and drop the target, which can be placed into the source container.
The drag action is broken down as follows:
1. drag start: click the mouse on the drag source and start to move
2. drag move: Moving
3. drag enter: Move to the target container
4. drag leave: remove the target container
5. drop: Release the mouse on the target container
6. drag end: end
Before html5, page elements do not support drag and drop events. Therefore, the drag function is implemented by listening to mouse events and recording the drag status.

Simplest example

The simplest drag operation is to change the position of an element without changing its container. Example:

Drag me!

Script
Script
Script
$ (Function (){
$ ("# Dragsource"). draggable ();
})
Script


Drag to another container

A more common scenario is to drag an element to another container. Therefore, you need to apply the droppable function on the drop target container. Let's add a div as a container based on the previous example and apply the droppable function:

Drag me!

Drop here

Script
Script
Script
$ (Function (){
$ ("# Dragsource"). draggable ();
$ ("# Droppable"). droppable ();
})
Script


Event listening and echo (Feedback)

If you run the previous example, you may have doubts. Are you sure you want to put it on the target container? Users may also have the same questions. Therefore, you can listen to some events that occur during the drag process and make it visible to users. This is called the echo (Feedback ).

For source, events that can be monitored include:

Create: triggered when the draggable function is applied to the source.
Start: triggered when the drag starts.
Drap: triggered during dragging
Stop: triggered upon release
For target, events that can be monitored include:
Create: triggered when the droppable function is applied on the target.
Activate: If the currently dragged source can be dropped to the current target
Deactivate: If you can drop to the target and drag to stop,
Over: the source is dragged to the target.
Out: the source is dragged out of the target.
Drop: source is released to target
All event handlers are passed through parameters of the draggable and droppable functions, and Feedback can be implemented in these event handlers. Take a look at the actual example:

:-|

Can drop!

Script
Script
Script
$ (Function (){
$ ("# Dragsource"). draggable ({
Start: function (event, ui ){
$ (This). find ("p" ).html (":-S ");
},
Stop: function (event, ui ){
$ (This). find ("p" ).html (":-| ");
}
});
$ ("# Droppable"). droppable ({
Activate: function (event, ui ){
$ (This). find ("p" example .html ("Drop here! ");
},
Over: function (event, ui ){
$ (This). find ("p" example .html ("Oh, Yeah! ");
},
Out: function (event, ui ){
$ (This). find ("p" example .html ("Don't leave me! ");
},
Drop: function (event, ui ){
$ (This). find ("p" example .html ("I 've got it! ");
}
});
})
Script


Copy and drag

The previous example shows moving elements. Another common scenario is copying and dragging. For example, drag an element from the canvas to the canvas in visio. This is set through the helper parameter of the draggable function.

Helper can be specified as "original" and "clone", where "original" is the default value, that is, to drag itself, and clone means to create a clone of itself for drag and drop. Helper can also be specified as a function, which returns a custom DOM element for dragging.
When you do not drag yourself, you need to specify the drop event function on the target. In this function, add specific elements to the target container. Otherwise, nothing will happen during the drop operation.
An example of simple replication is as follows:

Drag me!

Script
Script
Script
$ (Function (){
$ ("# Dragsource"). draggable ({
Helper: "clone"
});
$ ("# Container"). droppable ({
Drop: function (event, ui ){
$ (This). append ($ (" Ui. offset. left + "; top:" + ui. offset. top + "'> clone

"));
}
});
})
Script


Drag Control

In all examples, you can drag the source randomly. In practice, you often need to control the drag behavior. The following are several examples.

Drag direction

The default direction is x and y. You can use the axis parameter of draggable to restrict horizontal or vertical dragging. As follows:

--

|

Script
Script
Script
$ (Function (){
$ ("# DragX"). draggable ({axis: "x "});
$ ("# DragY"). draggable ({axis: "y "});
});
Script


Drag range

In addition to the direction, you can also use the containment parameter to constrain the drag range. This parameter is of the Selector, Element, String, and Array type. Here, String can be parent, document, window, and Array, which are the four-element group of the specified rectangular area (regin): [x1, y1, x2, y2]. In the following example, parent and regin are specified as the range restrictions:

In parent

In regin

Script
Script
Script
$ (Function (){
$ ("# Draggable1"). draggable ({containment: "parent "});
$ ("# Draggable2"). draggable ({containment: [300,200,]});
});
Script


Drag Adsorption

You can also attach other elements or grids when dragging them. Use the snap parameter to specify the element to be adsorbed, and use the grid parameter to specify the element to be adsorbed to the grid, as shown below:

Adsorption to other drag-and-drop Elements

Adsorption to container

Adsorption to grid (30x30)

Script
Script
Script
$ (Function (){
$ ("# Draggable1"). draggable ({snap: true });
$ ("# Draggable2"). draggable ({snap: "# container "});
$ ("# Draggable3"). draggable ({grid: [30,30]});
});
Script


Handle)

By default, the entire element can be dragged, or a child element of the element can be specified as the handle to be dragged, such:

Handle

......
Script
$ ("# Draggable"). draggable ({handle: "p "});
Script
Drop limit

The default droppable specifies that the element can accept all the drops, but the accept parameter can only accept the drop of some elements. The type of the accept parameter is a string that conforms to the jqueryselector. For example:
$ (". Selector"). droppable ({accept: '. special '})
Only elements with special styles are accepted.

Enhance User Experience

Previously, the drag and drop function was implemented. JQueryUI also has some parameters to enhance the user experience. For example, the cursor parameter can specify the shape of the mouse pointer, cursorAt specifies the relative position of the mouse pointer in the source, and revert can specify the source "floating" back to the original position when drop fails. An example of a combination is as follows:

I revert when I'm not dropped

Drop me here

Script
Script
Script
$ (Function (){
$ ("# Draggable2"). draggable ({revert: "invalid", cursor: "move", cursorAt: {top: 56, left: 56 }});
$ ("# Droppable"). droppable ({
ActiveClass: "ui-state-hover ",
HoverClass: "ui-state-active ",
Drop: function (event, ui ){
$ (This)
. AddClass ("ui-state-highlight ")
. Find ("p ")
. Html ("Dropped! ");
}
});
});
Script


Summary

JQueryUI provides powerful drag-and-drop functions and a good user experience, while making it easy to use. This article describes common usage. For more parameters, see Draggable and Droppable on the project homepage.