Нажать и перетащить

Демо можно найти здесь.

Чему я научился на этом мини-проекте.

Флаговая переменная

Их можно использовать для управления потоком метода или другой части функциональности.

В основном они используются для хранения значения до тех пор, пока не изменится какое-либо условие, после чего вы можете изменить переменную. Одним из наиболее распространенных вариантов использования этого является хранение логического значения, которое зависит от какого-либо другого фрагмента кода.

В этом примере переменная isDown используется для отслеживания состояния мыши. Когда событие mousedown запускается, переменная isDown изменяется, что используется для добавления дополнительных функций.

pageX и offsetLeft

В этом проекте событие mousedown используется для запуска функции щелчка и перетаскивания. Чтобы это работало эффективно, использовалась точка привязки, представляющая начальную точку клика, свойство pageX события фиксирует это значение.

Если добавляется поле или отступ, значение pageX будет отключено, чтобы компенсировать эту настройку, вы можете вычесть измененные пиксели (из смещения родительского элемента) в окно.

Код для этого показан ниже.

Первоначально опубликовано на gist.github.com.