The APIS provided by JQuery UI 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 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:Copy codeThe Code is as follows: <Head> <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>
</Html>
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:Copy codeThe Code is as follows: <Head>
</Head>
<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" 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>
</Body>
</Html>
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:Copy codeThe Code is as follows: <Head> <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>
</Html>
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:Copy codeThe Code is as follows: <Head> <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>
</Html>
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:Copy codeThe Code is as follows: <Head> <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: [300,200,]});
});
</Script>
</Body>
</Html>
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:
<Div id = "draggable2" class = "draggable">
<P> adsorption to container </p>
</Div>
<Div id = "draggable3" class = "draggable">
<P> adsorption to the 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>
</Html>
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:Copy codeThe Code is as follows: <div id = "draggable">
<P> handle </p>
</Div>
......
<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 jquery selector. 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:Copy codeThe Code is as follows: <Head>
<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>
</Head>
<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>
</Html>
Summary
JQuery UI 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 official website.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
