jquery对div元素进行鼠标移动（稍稍修改下可以实现div跟随鼠标）

转载于 2018-09-04 15:14:00 发布 · 107 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kusy/p/9584577.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用jQuery实现窗口拖动的方法。通过监听鼠标按下、移动和释放事件，可以自由地移动指定的DOM元素。该方法适用于简单的拖拽需求。

/*
网上找了资料都是对于event.clientX和offset().left进行了计算，但是去掉了这个计算方式，直接使用当前坐标也一样，效果都一样不太好
strHeader:标题 jquery定位字符串
strForm：窗体 jquery定位字符串
*/
var isMove = false;
//var x = 0;
//var y = 0;
//var offx = 0;
//var offy = 0;
function movePage(strHeader,strForm) {
    $(strHeader).mousedown(
        function(event) {
            isMove = true;
            //x = event.clientX;
            //y = event.clientY;
            //offx = $(strForm).offset().left;
            //offy = $(strForm).offset().top;
        }
    );
    $(document).mousemove(
        function(event) {
            if(isMove) {
                $(strForm).css({
                   //'left': (event.clientX - (x-offx) ) + 'px',
                   //'top': (event.clientY - (y-offy) )  + 'px'
                    'left': (event.clientX - (0) ) + 'px',
                    'top': (event.clientY - (0) )  + 'px',
                });
            }
        }
    );
    $(document).mouseup(
        function() {
            isMove = false;
        }
    );

}