jQuery实现图片拖动排序：HTML5拖放API应用

HTML5拖放API与jQuery实现原理

在Web页面开发中，若需调整多个元素的位置顺序，常采用元素拖动交互方式。HTML5规范引入了全局属性draggable，开发者可通过设置其值为true或false，来控制特定元素是否具备拖动能力。

以下示例以图片拖动排序为例，演示如何使用jQuery完成该功能。页面包含多张图片，用户可将某张图片拖动至另外两张图片之间，从而将该图片插入到指定位置。

 
<!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() {
// 正在拖动的图片的父级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>
</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事件用于标识元素开始被拖动，dragover事件在元素被拖动至目标区域上方时触发，而drop事件则在用户松开鼠标完成拖动时执行。

设置draggable="true"表明img元素支持拖动操作。值得注意的是，HTML5中img元素默认即为可拖动状态，因此该属性在某些情况下可省略；但若需对div等默认不可拖动元素实现拖动功能，则必须显式设置draggable="true"。

代码中class为drop-left和drop-right的div元素分别位于图片左右两侧，作为接收区，用于捕获其他图片拖动至此位置时的插入逻辑。