实现逻辑分析:
1.当鼠标触发按下事件
2.记录当前屏幕坐标
3.和要控制的div坐标向减的到二者之间关系
4.通过鼠标移动事件
5.激活div移动事件
6.div的新位置就鼠标位置和原始坐标的关系值
代码:
function dragPanelDivMove(downDiv,moveDiv){ $(downDiv).mousedown(function (e) { var isMove = true; var div_x = e.pageX - $(moveDiv).offset().left; var div_y = e.pageY - $(moveDiv).offset().top; $(document).mousemove(function (e) { if (isMove) { var obj = $(moveDiv); obj.css({"left":e.pageX - div_x, "top":e.pageY - div_y}); } }).mouseup( function () { isMove = false; }); });
}
dragPanelMove("#div1","#div2")