DIV可以拖动的巧妙设计

DIV把拖动事件绑定在自己的身上是最容易实现的形式，但是，在实际应用中，把拖动事件绑定在自己身上当鼠标移动过快容易失去焦点，因此，有一个灵活的设计方法：

把绑定事件绑定在某个范围更大的控件上。当鼠标在范围更大的控件上移动时，拖动事件就不会失去焦点！！

如下代码所示: 下面的代码有个地方写死了，在于只能拖动对话框的标题部分

/*增加该弹框拖动功能

    $t, 需要增加拖拽的element

    $f，范围element TODO未实现

    $d, $t里面能够拖动的element

*/

function AddDrag($t, $f, $d) {

 

    var isDown = false;

    var dX, dY;

 

    $f = !$f ? $('body') : $f;

 

    //能够拖动的div，这里写死是（.box-title）;

    $d = !$d ? $t : $d; //以后需要改动

 

    //console.log(bOffset+"/"+rOffset);

    function down(e) {

        //$(e.target.parentElement).is($d)这里先写死了！！！！！

        if ($(e.target.parentElement).is($d[0])) {

            var left = $(this).css('left');

            var top = $(this).css('top');

 

            var startX = Number(left.substr(0, left.length - 2)); //$t距离浏览器窗口最左边的距离

            var startY = Number(top.substr(0, top.length - 2)); //$t距离浏览器窗口最顶端的距离

 

            dX = e.clientX - startX; //鼠标当前的X坐标 - $t距离浏览器窗口最左边的距离 = 鼠标当前X距离到$t最左边的距离

            dY = e.clientY - startY; //鼠标当前的Y坐标 - $t距离浏览器窗口最上面边的距离 = 鼠标当前Y距离到$t最上面边的距离

 

            isDown = true;

 

            e.stopPropagation();

        }

    };

 

    function move(e) {

        if (isDown) {

            $(this).css('cursor', 'move');

            $(this).css("box-shadow", "4px 4px 10px #999999");

 

            var X = e.clientX - dX; //$t的X的偏移量

            var Y = e.clientY - dY; //$t的Y的偏移量

 

            var hOffset = Number($f.css('height').substr(0, $f.css('height').length - 2)); // $f的顶端偏移量

            var wOffset = Number($f.css('width').substr(0, $f.css('width').length - 2)); //$f的右端偏移量

 

            var width = Number($(this).css('width').substr(0, $(this).css('width').length - 2)); //$t距离浏览器窗口最右边的距离

            var height = Number($(this).css('height').substr(0, $(this).css('height').length - 2)); //$t距离浏览器窗口最底边的距离

            //console.log(bottom+"/"+right);

            if (X <= 0) X = 0;

            if (Y <= 0) Y = 0;

            if (X + width >= wOffset) X = wOffset - width;

            if (Y + height >= hOffset) Y = hOffset - height;

 

            $(this).css({

                left: X + 'px',

                top: Y + 'px'

            });

 

            e.stopPropagation();

        }

    };

 

    function up(e) {

        if (!isDown) return;

        $(this).css('cursor', 'default');

        $(this).css('box-shadow', '');

 

        isDown = false;

 

        e.stopPropagation();

    };

 

    $f.on({

        mousedown: down.bind($t),

        mousemove: move.bind($t),

        mouseup: up.bind($t)

    });

    /*拖拽功能结束*/

};