Div窗口移动(基于jQuery)

2018-11-19  本文已影响0人  有想法的人
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事件丢失而导致鼠标松开后窗口依然跟随的情况,故应添加如下代码:
具体内容见:https://www.jianshu.com/p/5847b0e08ea8 中《mouseup事件丢失的原因与解决办法》

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

猜你喜欢

热点阅读