1.实现随鼠标移动的效果；
2.初始化一个元素及其坐标；
3.拖拽对象的最后坐标，与元素的坐标 进行计算和判断 来确定 要插入的目标元素；
4.用insertbefore 方法 插入到目标元素的前面
具体代码如下：
复制代码 代码如下:
测试的拖拽功能
).insertbefore(thediv);
});
});
$(document).mousemove(function(event) {
if (!move) return false;
lastpos.x = event.pagex - range.x;
lastpos.y = event.pagey - range.y;
lastpos.y1 = lastpos.y + thedivheight;
// 拖拽元素随鼠标移动
thediv.css({left: lastpos.x + 'px',top: lastpos.y + 'px'});
// 拖拽元素随鼠标移动 查找插入目标元素
var $main = $('.main'); // 局部变量：按照重新排列过的顺序 再次获取 各个元素的坐标，
tempdiv = $(.dash); //获得临时 虚线框的对象
$main.each(function () {
tardiv = $(this);
tarpos.x = tardiv.offset().left;
tarpos.y = tardiv.offset().top;
tarpos.y1 = tarpos.y + tardiv.height()/2;
tarfirst = $main.eq(0); // 获得第一个元素
tarfirsty = tarfirst.offset().top + thedivhalf ; // 第一个元素对象的中心纵坐标
//拖拽对象 移动到第一个位置
if (lastpos.y tempdiv.insertbefore(tarfirst);
}
//判断要插入目标元素的 坐标后， 直接插入
if (lastpos.y >= tarpos.y - thedivhalf && lastpos.y1 >= tarpos.y1 ) {
tempdiv.insertafter(tardiv);
}
});
}).mouseup(function(event) {
thediv.insertbefore(tempdiv); // 拖拽元素插入到 虚线div的位置上
thediv.attr(class, main); //恢复对象的初始样式
tempdiv.remove(); // 删除新建的虚线div
move=false;
});
});
div1
div2
div3
div4
div5