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 the JQueryUI function. The APIS provided by JQuery UI greatly simplify the development of drag-and-drop functions. 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:
The Code is as follows:
Drag me!
