Почему drag and drop некорректно работает при быстром перемещении?

Question

[Никита Егоров]

Есть класс swipe (вот фидл) отвечающий за drag'n drop событие. Я вырезал из него лишние, оставил вот это:

class Swipe {
    constructor(elem, container) {
        this.elem       = elem;
        this.container  = container;
        this.swipeEvent = this.swipeEvent.bind(this);

        // Вешаем обработчики событий на mouse события
        this.elem.onmousedown = event => {
            const coordsElem = this.elem.getBoundingClientRect();
            this.shiftX = event.clientX - coordsElem.left;
            this.shiftY = event.clientY - coordsElem.top;
            
            this.elem.addEventListener('mousemove', this.swipeEvent);
            
            this.elem.onmouseup = () => {
                // Удаляем обработчики событий
                this.elem.removeEventListener('mousemove', this.swipeEvent);
                this.elem.onmouseup = null;
            }
        }
    }

    swipeEvent(event) {
    	// Размеры контейнера
        const height = this.container.offsetHeight - this.elem.offsetHeight;
        const width  = this.container.offsetWidth - this.elem.offsetWidth;
				
        // Координаты блока относительно контейнера
        const coordsContainer = this.container.getBoundingClientRect();                
        let x = event.clientX - coordsContainer.left - this.shiftX;
        let y = event.clientY - coordsContainer.top - this.shiftY ;
				
        // Если координаты выходят за контейнер, смещаем их
        x = x <= 0 ? 0 : x;
        y = y <= 0 ? 0 : y;
        x = x >= width ? width : x;
        y = y >= height ? height : y;

        this.elem.style.left = x  + 'px';
        this.elem.style.top  = y + 'px';

        this.elem.ondragstart = () => false;
    }
}

// В данном случае, контейнер - body
const container = document.body;
const element   = document.querySelector('.block');

const swipe = new Swipe(element, container);

Но если быстро перемещать курсор мыши, то он слетает с блока, что вроде бы естественно, но вот тут (пролистайте чуть ниже, до примера) не слетает.

Как можно добиться такого же эффекта, чего же не хватает?

Answer 1

[0xD34F]

У вас обработчик mousemove вешается на перемещаемый элемент - естественно, что при выходе курсора за пределы элемента перемещение прекращается. А во втором примере, где всё окей - там обработчик mousemove вешается на document.

Comments

[Никита Егоров]

Аааа, спасибо.