Div窗口移动(基于jQuery)

120 阅读1分钟
function move(className) {
    var isMove = false;
    var X, Y;
    $("."+className).click(function () {
    }).mousedown(function (e) {
        isMove = true;
        X = e.pageX - parseInt($("."+className).css("left"));
        Y = e.pageY - parseInt($("."+className).css("top"));
    });
    $(document).mousemove(function (e) {
      pauseEvent(e);//防止mouseup事件丢失方法,详见下文
        if (isMove) {
            var left = e.pageX - X;
            var top = e.pageY - Y;
            $("."+className).css({left: left, top: top});
        }
    }).mouseup(function () {
        isMove = false;
    });
}
move("node");

由于此方法会因为mouseup事件丢失而导致鼠标松开后窗口依然跟随的情况,故应添加如下代码: 具体内容见:www.jianshu.com/p/5847b0e08… 中《mouseup事件丢失的原因与解决办法》

function pauseEvent(e){
 if(e.stopPropagation) e.stopPropagation();
 if(e.preventDefault) e.preventDefault();
 e.cancelBubble=true;
 e.returnValue=false;
 return false;
}