моя простая функция drag & drop заикается

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;
}); 

Работает, проблема в том, что " animation " заикается и работает медленно. он не может справиться со скоростью мыши, и событие 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. Я не использую 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.Для этого написана библиотека: Дроссель / дебанд Бен Алмана - и не волнуйтесь, это 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
  }));

Использование $(window) в соответствии с предложением @ rgthree.