Summary of implementation methods of JQuery UI's drag and drop function_jquery

The API provided by JQuery UI greatly simplifies the development of drag and drop functions. Just call the draggable and droppable functions on the drag source and target respectively.

Principle of Drag and Drop
First of all, we need to clarify a few concepts.
Source: drag source, element to be dragged.
Taerget: Drag and drop target, a container that can be placed into the source.
The drag action is broken down as follows:
1. drag start: press the mouse on the drag source (source) and start moving
2. drag move: during the movement
3. drag enter : move into the target container
4. drag leave: move out of the target container
5. drop: release the mouse on the target container
6. drag end: end
Before HTML5, page elements did not directly support drag events. Therefore, the drag-and-drop function is implemented by listening to mouse events and recording the drag-and-drop status.

The simplest example
The simplest drag does not change the container where the element is located, but only changes its position. An example is as follows:

Copy code The code is as follows:

< head>

Drag me!

<script> <br>$(function() { <br>$( "#dragsource" ).draggable(); <br>$( "#droppable" ).droppable(); <br>}) <br></script>

< ;/html>

Event monitoring and feedback (Feedback)
When you run the previous example, you may be confused, is it really placed on the target container? ? Users will also have the same doubts. Therefore, you can monitor some events that occur during the dragging process and let the user know in a visible way. This is called feedback.

For source, events that can be monitored include:

create: triggered when draggable function is applied on source
start: triggered when dragging is started
drap: drag Triggered during movement
Stop: Triggered when released
For the target (target), the events that can be monitored include:
Create: Triggered when the droppable function is applied to the target
Activate: If the currently dragged If the source can be dropped to this target, it will trigger
. Deactivate: If the dragging that can be dropped to this target stops, it will trigger
. Over: The source is dragged to the target.
. Out: The source is dragged away from the target.
Drop: source is released to target
Event handling functions are passed through the parameters of draggable and droppable functions, and Feedback can be performed in these event handling functions. Take a look at the actual example:

Copy the code The code is as follows:

:-|

Can drop!

<script> <br>$(function() { <br>$( "#dragsource" ).draggable({ <br>start: function(event,ui) { <br>$(this).find("p").html(":-S"); <br>}, <br>stop:function(event,ui){ <br>$(this).find("p").html(":-|"); <br>} <br>}); <br><br>$( "#droppable" ).droppable({ <br>activate: function(event,ui) { <br>$(this).find("p").html( "Drop here !" ); <br>}, <br>over: function(event,ui) { <br>$( this ).find( "p" ).html( "Oh, Yeah!" ); <br><br>}, <br>out: function(event,ui) { <br>$( this ).find( "p" ).html( "Don't leave me!" ); <br><br>}, <br>drop: function( event, ui ) { <br>$( this ).find( "p" ).html( "I've got it!" ); <br>} <br>}); <br>}) <br></script>

复制拖动
前面的例子都是移动元素，另一种常见的场景是复制拖动。比如visio中的从画板中拖动元素到画布。这是通过draggable函数的helper参数设定的。

helper可以指定为“original”, "clone"，其中"original"是默认值，即拖动自身，而clone表示创建自身的一个克隆用于拖拽。helper还可以指定为函数，该函数返回一个自定义的DOM元素用于拖拽。
当不是拖动自身的时候，需要在target上指定drop事件函数，在该函数中将特定的元素添加到target容器上，否则drop的时候什么事情都不会发生。
简单复制的例子如下：

复制代码 代码如下:

拽我!

<script> <br>$(function() { <br>$( "#dragsource" ).draggable({ <br>helper:"clone" <br>}); <br><br>$("#container").droppable({ <br>drop:function(event,ui){ <br>$(this).append($("<p style='position:absolute;left:" <BR>ui.offset.left ";top:" ui.offset.top "'>clone</p>")); <br>} <br>}); <br>}) <br></script>

拖动控制
到目前位置，所有的例子中都可以对source随意拖动。在实际应用中经常需要对拖动行为进行控制。下面给出几个例子。

拖动方向
默认拖动方向为x,y两个方向。通过draggable的axis参数可以限制只能水平或竖直拖动。如下：

复制代码 代码如下:

－－

|

<script> <br>$(function() { <br>$("#dragX").draggable({axis:"x"}); <br>$("#dragY").draggable({axis:"y"}); <br>}); <br></script>

Drag range
In addition to the direction, the drag range can also be constrained through the containment parameter. This parameter accepts Selector, Element, String, Array types. Among them, String can be parent, document, window, and Array is a four-element array that specifies a rectangular area (regin): [x1, y1, x2, y2]. The following example specifies parent and regin as range limits respectively:

Copy code The code is as follows:

in parent

in regin

<script> <br>$(function() { <br>$ ("#draggable1" ).draggable({containment: "parent" }); <br>$("#draggable2").draggable({containment: [20,20,300,200] }); <br>}); <br></script>

Drag adsorption
Can also be used while dragging Snap to other elements or grids. Use the snap parameter to specify the element to be snapped to, and the grid parameter to specify to snap to the grid, as follows:

Copy code The code is as follows:

< ;div id="container" style="background-color:gray;height:300">

Adsorb to other Draggable elements

Adsorb to container< /p>

Snap to grid (30x30)

<script> <br>$(function() { <br>$( "#draggable2" ).draggable({ revert: "invalid",cursor: "move", cursorAt: { top: 56, left: 56 } }); <br>$( "#droppable" ).droppable({ <br>activeClass: "ui-state-hover", <br>hoverClass: "ui-state-active", <br>drop: function( event, ui ) { <br>$( this ) <br>.addClass( "ui-state-highlight" ) <br>.find( "p" ) <br>.html( "Dropped!" ); <br>} <br>}); <br>}); <br></script>

小结
JQuery UI提供了强大的拖拽功能和良好的用户体验，同时又非常容易使用。本文介绍了常用的各种用法。更多的参数还可以参考官方网站的Draggable 和 Droppable 。

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn