美文网首页
Div窗口移动(基于jQuery)

Div窗口移动(基于jQuery)

作者: 有想法的人 | 来源:发表于2018-11-19 18:01 被阅读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;
}

相关文章

  • Div窗口移动(基于jQuery)

    由于此方法会因为mouseup事件丢失而导致鼠标松开后窗口依然跟随的情况,故应添加如下代码:具体内容见:https...

  • 实现一个jQuery的API

    window.jQuery = jQuery('div') window.$ = jQuery var $div ...

  • jQuery样式

    jQuery对象转DOM对象var $div = $('div'); //jQuery对象$div[0] $di...

  • 2018-09-22理解jQuery。

    window.jQuery = ???window.$ = jQuery var ('div')div.setTe...

  • 2018-08-22

    实现JQuery之API 1.需求分析window.jQuery = ???window.div = div.ad...

  • jquery

    var div =('div')通过div标签选择出的jquery对象 赋给$div变量 $div.addClas...

  • jQuery-事件和插件

    1 - jQuery 事件注册 $("div").click(function() {}); jQuery 为我们...

  • 实现一个 jQuery 的 API

    1.$(div) 可以将 div 封装成一个 jQuery 对象,就跟 div[0] === div ```,di...

  • Jquery

    引用Jquery jquery加载 绑定click事件 jquery特殊效果fadeIn()('#div1').f...

  • jQuery分组展开案例

    点击标题,对应的div展开,其他的div合上。 jQuery特性:隐式迭代jQuery特性:链式编程,在于一个方法...

网友评论

      本文标题:Div窗口移动(基于jQuery)

      本文链接:https://www.haomeiwen.com/subject/dbvafqtx.html