The API provided by the JQuery UI greatly simplifies the development of drag-and-drop functionality. You only need to call draggable and droppable two functions on the drag source and target (target) respectively.
principle of dragging and dragging
First, we need to define a few concepts.
Ource: Drag the source to drag the element.
Taerget: Drag-and-drop target that can be placed into the source container.
Drag-and-drop actions are 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 target container
4. Drag leave: Remove target container
5. Drop: Release the mouse on the target container
6. Drag End: Ending
Before HTML5, page elements do not directly support drag-and-drop events. So it's all done by listening to mouse events and recording the drag-and-drop state of the drag-and-drop function.
The simplest example
The simplest drag is not to change the container in which the element is located, but only to change its position. Examples are as follows:
Copy Code code as follows:
<body>
<div id= "Container" >
<div id= "DragSource" >
<p> Drag Me!</p>
</div>
</div><!--End Container-->
<script type= "Text/javascript" src= "Js/jquery-1.7.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery-ui-1.8.16.custom.min.js" ></script>
<script>
$ (function () {
$ ("#dragsource"). Draggable ();
})
</script>
</body>
drag to another container
A more common scenario is to drag the element to another container. This requires that the Droppable function be applied on the drop target (target) container. Let's add a div as a container and apply the Droppable function based on the previous example:
Copy Code code as follows:
<body>
<div id= "Container" >
<div id= "DragSource" >
<p> Drag Me!</p>
</div>
</div><!--End Container-->
<div id= "Droppalbe" style= "Width:300px;height:300px;background-color:gray" >
<p>drop here</p>
</div>
<script type= "Text/javascript" src= "Js/jquery-1.7.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery-ui-1.8.16.custom.min.js" ></script>
<script>
$ (function () {
$ ("#dragsource"). Draggable ();
$ ("#droppable"). Droppable ();
})
</script>
</body>
Event listening and echoing (Feedback)
Running an example, you may have doubts, really put it on the target container? Users will also have the same doubts. So, you can listen to some of the events that occur during the drag and let the user know in a visible way. This is called Echo (Feedback).
For source, the events that can be monitored include:
Create: Triggers when applying the draggable function on source
Start: triggered when dragging starts
Drap: Triggering during drag
Stop: triggering when releasing
For target, the events that can be monitored include:
Create: Triggers when the droppable function is applied on target
Activate: If the current dragged source can drop to this target, it triggers
Deactivate: If drag-and-drop to this target can be stopped, trigger
Over:source is dragged to target
Out:source is dragged away from target
Drop:source was released to target.
Event handlers are passed through the parameters of the draggable and droppable functions, and can be feedback in these event-handler functions. Take a look at the actual example:
Copy Code code as follows:
<body>
<div id= "DragSource" >
<p id= "targetmsg" >:-| </p>
</div>
<div id= "droppable" style= "background-color:gray;height:300" >
<p>can drop! </p>
</div>
<script type= "Text/javascript" src= "Js/jquery-1.7.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery-ui-1.8.16.custom.min.js" ></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"). HTML ("Drop here!");
},
Over:function (Event,ui) {
$ (this). Find ("P"). HTML ("Oh, yeah!");
},
Out:function (Event,ui) {
$ (this). Find ("P"). html ("Don ' t leave me!");
},
Drop:function (event, UI) {
$ (this). Find ("P"). html ("I ' ve got it!");
}
});
})
</script>
</body>
Copy Drag
The previous examples are all moving elements, and another common scenario is the replication drag. For example, in Visio, drag an element from the artboard to the canvas. This is set by the helper parameter of the Draggable function.
Helper can be specified as "original", "Clone", where "original" is the default value, that is, dragging itself, and clone represents creating a clone of itself for dragging. The helper can also be specified as a function that returns a custom DOM element for dragging.
When you are not dragging yourself, you need to specify the drop event function on target to add a specific element to the target container in that function, otherwise nothing will happen at the drop.
Examples of simple replication are as follows:
Copy Code code as follows:
<body>
<div id= "DragSource" >
<p> Drag Me!</p>
</div>
<div id= "Container" style= "background-color:gray;height:300" >
</div><!--End Container-->
<script type= "Text/javascript" src= "Js/jquery-1.7.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery-ui-1.8.16.custom.min.js" ></script>
<script>
$ (function () {
$ ("#dragsource"). Draggable ({
Helper: "Clone"
});
$ ("#container"). Droppable ({
Drop:function (Event,ui) {
$ (this). Append ($ ("<p style= ' position:absolute;left:" +
Ui.offset.left+ "; Top:" +ui.offset.top+ "' >clone</p>");
}
});
})
</script>
</body>
Drag Control
To the current location, all of the examples can be dragged to source. In practical application, the drag behavior is often controlled. A few examples are given below.
Drag Direction
The default drag direction is x,y two orientations. You can restrict horizontal or vertical drag through the axis parameters of draggable. As follows:
Copy Code code as follows:
<body>
<div id= "DRAGX" >
<p>--</p>
</div>
<div id= "Dragy" >
<p>|</p>
</div>
<script type= "Text/javascript" src= "Js/jquery-1.7.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery-ui-1.8.16.custom.min.js" ></script>
<script>
$ (function () {
$ ("#dragX"). Draggable ({axis: "x"});
$ ("#dragY"). Draggable ({axis: "Y"});
});
</script>
</body>
Drag Range
In addition to orientation, you can constrain the range of the drag by containment parameters. This parameter accepts selector, Element, String, array type. Where string can be Parent,document,window,array is a four-dollar array that specifies a rectangular region (Regin): [X1,y1,x2,y2]. The following example specifies both parent and Regin as the scope limit:
Copy Code code as follows:
<body>
<div id= "Container" style= "background-color:gray;height:300" >
<div id= "Draggable1" style= "background-color:red;height:20;width:100" >
<p>in parent</p>
</div>
<div id= "Draggable2" style= "background-color:green;height:20;width:100" >
<p>in regin</p>
</div>
<script type= "Text/javascript" src= "Js/jquery-1.7.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery-ui-1.8.16.custom.min.js" ></script>
<script>
$ (function () {
$ ("#draggable1"). Draggable ({containment: "parent"});
$ ("#draggable2"). Draggable ({containment: [20,20,300,200]});
});
</script>
</body>
Drag adsorption
You can also adsorb to other elements or grids as you drag. Use the snap parameter to specify the element to be adsorbed, and use the grid parameter to specify the adsorption to the grid as follows:
Copy Code code as follows:
<style>
. draggable {background-color:green; width:90px height:80px; padding:5px; float:left; margin:0 10px 10px 0 font-size :. 9em; }
</style>
<body>
<div id= "Container" style= "background-color:gray;height:300" >
<div id= "Draggable1" class= "draggable" >
<p> adsorption to other drag-and-drop elements </p>
</div>
<div id= "Draggable2" class= "draggable" >
<p> Adsorption to containers </p>
</div>
<div id= "Draggable3" class= "draggable" >
<p> adsorption to Grid (30X30) </p>
</div>
</div><!--container-->
<script type= "Text/javascript" src= "Js/jquery-1.7.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery-ui-1.8.16.custom.min.js" ></script>
<script>
$ (function () {
$ ("#draggable1"). Draggable ({snap:true});
$ ("#draggable2"). Draggable ({snap: "#container"});
$ ("#draggable3"). Draggable ({grid: [30,30]});
});
</script>
</body>
Drag the handle (handle)
The default is that the entire element can be dragged, or you can specify a child element of the element as a dragged handle, such as:
Copy Code code as follows:
<div id= "Draggable" >
<p>handle</p>
</div>
......
<script>
$ ("#draggable"). Draggable ({handle: "P"});
</script>
Drop Restrictions
The default droppable specifies that the element can accept all the drop, but can only accept the drop of certain elements through the accept argument. The type of the Accept parameter is a string that matches the jquery selector. For example:
$ (". Selector"). Droppable ({accept: '. Special '})
Indicates that only elements with special styles are accepted.
enhance the user experience
The front is to implement drag-and-drop functionality, jQueryUI also has some parameters to enhance the user experience. For example, the cursor parameter can specify the shape of the mouse pointer, Cursorat specify the relative position of the mouse pointer over source, and revert can specify that the source "floats" back to its original position when the drop fails. An example of a combination is as follows:
Copy Code code as follows:
<style>
. draggable {background-color:green; width:90px height:80px; padding:5px; float:left; margin:0 10px 10px 0 font-size :. 9em; }
. droppable {width:300px; height:300px; background-color:red}
</style>
<body>
<div id= "Draggable2" class= "draggable" >
<p>i revert when I ' m not dropped</p>
</div>
<div id= "droppable" class= "droppable" >
<p>drop Me here</p>
</div>
<script type= "Text/javascript" src= "Js/jquery-1.7.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery-ui-1.8.16.custom.min.js" ></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>
</body>
Summary
The JQuery UI provides powerful drag-and-drop functionality and a good user experience, and is very easy to use. This article describes the various uses that are commonly used. More parameters can also refer to the official website of Draggable and droppable.
