In a Web page, you need to change the position of multiple elements, which can be implemented by dragging elements. A global property draggable is added to the HTML5 to control whether the element can be dragged by setting the True/false.
Drag the picture below as an example, using jquery to achieve: The page has more than one picture, drag a picture to the middle of the other two pictures, you can insert the picture's position between the two figure.
Copy Code code as follows:
<! DOCTYPE html>
<style>
. img-div img {
width:200px;
height:200px;
Float:left;
}
. img-div {
Float:left;
}
. drop-left,.drop-right {
width:50px;
height:200px;
Float:left;
}
</style>
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" ></script>
<script>
$ (document). Ready (function () {
The parent div of the picture being dragged
var $srcImgDiv = null;
Start dragging
$ (". Img-div img"). Bind ("DragStart", function () {
$srcImgDiv = $ (this). parent ();
});
The event that is triggered when you drag over the. drop-left,.drop-right
$ (". Drop-left,.drop-right"). Bind ("DragOver", function (event) {
You must set the Allow drag-and-drop by Event.preventdefault ()
Event.preventdefault ();
});
End drag to release mouse event
$ (". Drop-left"). Bind ("Drop", function (event) {
Event.preventdefault ();
if ($srcImgDiv [0]!= $ (this). Parent () [0]) {
$ (this). Parent (). before ($SRCIMGDIV);
}
});
$ (". Drop-right"). Bind ("Drop", function (event) {
Event.preventdefault ();
if ($srcImgDiv [0]!= $ (this). Parent () [0]) {
$ (this). Parent (), after ($SRCIMGDIV);
}
});
});
</script>
<body>
<div class= "Img-div" >
<div class= "Drop-left" ></div>
<div class= "Drop-right" ></div>
</div>
<div class= "Img-div" >
<div class= "Drop-left" ></div>
<div class= "Drop-right" ></div>
</div>
<div class= "Img-div" >
<div class= "Drop-left" ></div>
<div class= "Drop-right" ></div>
</div>
<div class= "Img-div" >
<div class= "Drop-left" ></div>
<div class= "Drop-right" ></div>
</div>
</body>
DragStart is the event that starts dragging the element, DragOver is the event that is dragged above the element, and the drop is the event that the mouse is dragged over to release.
Draggable= "true" means that the IMG element can be dragged, but in fact the IMG default is drag, so this property can also be removed, and if you want to drag the div element then you need to set draggable= "true".
Class Drop-left and Drop-right div elements are placed on the left right side of the picture to receive other pictures dragged to this position.
