javascript - 我简单的拖放功能断断续续

Question

这是我制作的一个非常基本的功能，可以让一些元素可以用鼠标拖动。

$('.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。

编辑:多亏了 rgthree，稍作调整，现在可以使用了!

    $('.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');
        });

Answer 1

因此，您的问题主要源于您的 mousemove 方法。因为它正在监听您的拖动元素，所以当您移动得太快时，您的鼠标往往会离开您的元素，因此它会停止响应。相反，在 window 上监听 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;
});