javascript完美实现图片拖动改变顺序

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

在web页面中，需要改变多个元素的位置，可以通过元素拖动来实现。HTML5中加入了一个全局属性draggable，通过设置true/false来控制元素是否可拖动。

下面以图片拖动为例，用jQuery来实现：页面上有多个图片，把一个图片拖动到其他两个图片中间，就可以将这个图片的位置插入到两图之间。

html><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function() {// 正在拖动的图片的父级DIV
var $srcImgDiv = null;// 开始拖动
$(".img-div img").bind("dragstart", function() {
$srcImgDiv = $(this).parent();
});// 拖动到.drop-left,.drop-right上方时触发的事件
$(".drop-left,.drop-right").bind("dragover", function(event) {// 必须通过event.preventDefault()来设置允许拖放
event.preventDefault();
});// 结束拖动放开鼠标的事件
$(".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>