下面以图片拖动为例，用jQuery来实现：页面上有多个图片，把一个图片拖动到其他两个图片中间，就可以将这个图片的位置插入到两图之间。
代码如下:
// 正在拖动的图片的父级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);
}
});
});
draggable="true"表示img元素是可以拖动的，不过实际上img默认就是可拖动的，所以这个属性也可以去掉，如果要拖动div元素那么就需要设置draggable="true"。
class为drop-left和drop-right的div元素放在图片的左右侧，用于接收其他图片拖动到这个位置。
