天天看点

页面拖动功能jquery +js+html5 移动 弹出框 拖动 弹出框 拖动 div 拖动 弹出框

实现逻辑分析:

1.当鼠标触发按下事件

2.记录当前屏幕坐标

3.和要控制的div坐标向减的到二者之间关系

4.通过鼠标移动事件

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")      

继续阅读