Js image drag to change the order of the attached pictures

2020-03-30 02:58:05
OfStack

In a web page, you need to change the position of multiple elements, which you can do by dragging them. HTML5 adds a global property called draggable, which controls whether elements can be dragged by setting true/false.

Here is an example of dragging a picture, using jQuery to achieve: there are more than one picture on the page, drag a picture to the middle of the other two pictures, you can insert the position of the picture between the two pictures.

 
<!DOCTYPE html> 
<html> 
<head> 
<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() { 

//Parent DIV of the dragging image
var $srcImgDiv = null; 

//Began to drag
$(".img-div img").bind("dragstart", function() { 
$srcImgDiv = $(this).parent(); 
}); 

//The event that fires when you drag over. Drop-left,. Drop-right
$(".drop-left,.drop-right").bind("dragover", function(event) { 

//You must set the event.preventdefault () to allow drag and drop
event.preventDefault(); 
}); 

//Ends the drag release 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> 
</head> 
<body> 
<div class="img-div"> 
<div class="drop-left"></div> 
<img src="http://photos.tuchong.com/38538/f/6864556.jpg" draggable="true"> 
<div class="drop-right"></div> 
</div> 
<div class="img-div"> 
<div class="drop-left"></div> 
<img src="http://photos.tuchong.com/349669/f/6695960.jpg" draggable="true"> 
<div class="drop-right"></div> 
</div> 
<div class="img-div"> 
<div class="drop-left"></div> 
<img src="http://photos.tuchong.com/349669/f/6683901.jpg" draggable="true"> 
<div class="drop-right"></div> 
</div> 
<div class="img-div"> 
<div class="drop-left"></div> 
<img src="http://photos.tuchong.com/349669/f/5121337.jpg" draggable="true"> 
<div class="drop-right"></div> 
</div> 
</body> 
</html>

Dragstart is the event that starts dragging the element, dragover is the event that drags over the element, and drop is the event that releases the mouse after dragging.

Draggable ="true" means that the img element can be dragged, but actually img is dragable by default, so this property can also be removed, if you want to drag the div element then you need to set draggable="true".

Div elements with classes drop-left and drop-right are placed on the left and right sides of the image to receive additional images dragged to this location.

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405131757113.gif? 2014413175735 ">