我簡單的拖放功能口吃

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。

編輯：感謝rgree，並有一點調整，現在可以工作！

$('.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，所以我不仔細檢查你的工作休息，但我相信這是你想要的（和它在這個小提琴正常工作）：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; 
}); 

Answer 2

在情況下計算（或ajax請求或重繪或其他）太慢，你可以節流函數執行它只有一個interval一次。沒有針對此，Ben Alman's throttle/debounce書面圖書館 - 不要擔心，這是0.7千字節=）

jQuery的油門/防抖動讓您限速功能的多種有效的方式。將延遲和回調傳遞給$ .throttle將返回一個新函數，該函數每延遲毫秒將執行一次。

在你的情況下，油門回調爲mousemove。

// Choose an interval that keeps the movement smooth 
var interval = 10; 

$(window) 
    .on('mousemove', $.throttle(interval, function(e) 
    { 
    // Your move function 
    })); 

按照@rgthree的建議使用$(window)。