Global mouseMove

Question

Я создал следующий javascript, который будет использоваться на моем веб-сайте, основанном на jQuery. Что он делает, это перемещать слайдер вверх/вниз и масштабировать элемент выше выше/меньше.

Все работает нормально, но поскольку ползунок имеет высоту всего несколько пикселей, а событие перемещения немного медленное (оно не срабатывает для каждого пикселя), поэтому, когда я быстро перемещаю мышь, слайдер не может удерживайте, и мышь выйдет из элемента слайдера. Событие mouseMove больше не запускается, так как оно привязано к ползунку. Я думаю, все можно было бы исправить, установив globalMouseMove на весь сайт, но это не сработает, или, по крайней мере, я не знаю, как это сделать. Должен ли он быть документом или телом?

вот мой текущий код для слайдера:

$.fn.resize = function (itemToResize) { 

MinSize = 100; 
MaxSize = 800; 

pageYstart = 0; 
sliderMoveing = false; 
nuskriverHeight = 0; 

this.mousedown(function(e) { 
pageYstart=e.pageY; 
sliderMoveing = true 
nuskriverHeight = parseFloat((itemToResize).css('height')); 
}); 

this.mouseup(function() { 
sliderMoveing = false 
}); 

this.mousemove(function(e) { 
if (sliderMoveing) { 
    (itemToResize).css('height', (nuskriverHeight + (e.pageY - pageYstart))); 
    if (parseFloat((itemToResize).css('height')) > MaxSize) { (itemToResize).css('height', MaxSize) }; 
    if (parseFloat((itemToResize).css('height')) < MinSize) { (itemToResize).css('height', MinSize) }; 
}; 
}); 

};

Спасибо за любую помощь, очень ценится

Answer 1

Место события мыши на document

var $doc = $(document); 

this.mousedown(function(e) { 
    pageYstart=e.pageY; 
    sliderMoveing = true 
    nuskriverHeight = parseFloat((itemToResize).css('height')); 

    $doc.mouseup(function() { 
    sliderMoveing = false ; 
    $doc.unbind('mousemove mouseup') 
    }); 

    $doc.mousemove(function(e) { 
    if (sliderMoveing) { 
    (itemToResize).css('height', (nuskriverHeight + (e.pageY - pageYstart))); 
    if (parseFloat((itemToResize).css('height')) > MaxSize) { (itemToResize).css('height', MaxSize) }; 
    if (parseFloat((itemToResize).css('height')) < MinSize) { (itemToResize).css('height', MinSize) }; 
    }; 
    }); 

}); 

Answer 2

Обычно вы смотрите за mousedown на ползун (чтобы начать перетаскивание), и когда вы перетаскивая вас за mousemove и mouseup (и keypress, если вы хотите разрешить Esc отменять и такие) в любом месте на document.

Answer 3

На странице mousedown вы должны привязать обработчик события (на document) до mousemove и mouseup.

В обработчике mouseup вы должны снова отключить два глобальных обработчика.

---

Однако, возможно, проще использовать Draggable из JQuery UI: http://jqueryui.com/demos/draggable/