这是我制作的一个非常基本的功能,用于使某些元素可以用鼠标拖动。
$('.draggable').on('mousedown', function(e) {
var start = { top : parseInt($(this).css('top').replace(/px/,'')),
left: parseInt($(this).css('left').replace(/px/,'')) };
var mouse = { top : e.clientY, left: e.clientX };
$(this).addClass('dragged').on('mousemove',function(e) {
var end = {Y:start.top + e.clientY - mouse.top,
X:start.left + e.clientX - mouse.left }
$(this).css({top: end.Y+'px', left: end.X+'px'});
}).on('mouseup, mouseout, click',function() {
$(this).removeClass('dragged').off('mousemove');
});
return false;
});
它有效,问题是“动画”断断续续且缓慢。它无法跟上鼠标速度,并且 mouseup 事件未正确触发(我需要再次单击该元素才能释放它)。
如何改进? 我想保持简单和愚蠢,所以我不会使用一些我几乎无法理解的臃肿脚本,我也不会使用 JQueryUI。
编辑:感谢 rg Three,并且经过一些调整,现在可以工作了!
$('.draggable').on('mousedown', function(e) {
var start = { top : parseInt($(this).css('top').replace(/px/,'')),
left: parseInt($(this).css('left').replace(/px/,'')) };
var mouse = { top : e.clientY,
left: e.clientX };
var element = this;
$(this).addClass('dragged');
$(window).on('mousemove',function(mme) {
var end = { Y: start.top + mme.clientY - mouse.top,
X: start.left + mme.clientX - mouse.left }
$(element).css({ top : end.Y+'px',
left: end.X+'px' });
});
}).on('mouseup',function() {
$(this).removeClass('dragged');
$(window).off('mousemove');
});
最佳答案
所以,您的问题主要源于您的 mousemove
方法。因为它正在监听您的拖动元素,所以当您移动得太快时,您的鼠标倾向于移离您的元素,因此它会停止响应。相反,在窗口
上监听mousemove。我不使用 jQuery,所以我不会仔细检查你的其余工作,但我相信这就是你想要的(并且它在这个 fiddle 中工作得很好): http://jsfiddle.net/rgthree/dqPtV/
$('#tvsel .tavoli').on('mousedown', function(e) {
var start = {
top:parseInt($(this).css('top').replace(/px/,'')),
left: parseInt($(this).css('left').replace(/px/,''))
};
var mouse = {top:e.clientY, left:e.clientX};
var el = $(this);
el.addClass('dragged');
$(window).on('mousemove',function(mme) {
var end = {
Y:start.top + mme.clientY - mouse.top,
X:start.left + mme.clientX - mouse.left
}
el.css({top:end.Y+'px', left:end.X+'px'});
}).on('mouseup, mouseout, click',function() {
el.removeClass('dragged');
$(window).off('mousemove');
});
return false;
});
关于javascript - 我的简单拖放功能有些卡顿,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9165149/