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)
});
/*拖拽功能结束*/
};