На днях возникла необходимость реализовать на одной из страниц сайта возможность перетаскивания элемента (регулятор стоимости в фильтре по ценам) на JavaScript. До этого момента я себе чётко представлял следующий механизм реализации перетаскивания:
Обработать нажатие мыши на элементе и зафиксировать состояние начала перетаскивания;
Обработать перемещение мыши над элементом, чтобы в этот момент задать элементу координаты в соответствии с положением курсора мыши на странице;
Обработать отпускание клавиши мыши на элементе и зафиксировать состояние окончания перетаскивания.
[spoiler] Соответственно, этот механизм я и реализовал. Алгоритм и функционал работал верно, но была одна очень напрягающая вещь: если "схватить" перетаскиваемый элемент и резко дёрнуть мышь, то элемент не успевает за мышкой и останется в предыдущем положении, пока над ним снова не окажется указатель мыши. Так происходит потому, что новые координаты элементу присваиваются только когда курсор мыши находится над элементом, а как только он выходит за границы элемента (резко дёрнули мышь), новые координаты перестают присваиваться. При этом как только мы снова подводим указатель к элементу (даже если уже отпустили кнопку мыши), элемент снова начинает "бегать" за мышью, т.к. при её уходе с элемента не был зафиксирован факт окончания перетаскивания!
После того как было выяснено, что данный подход не годится, я нашёл новый механизм (механизм конечно же старый, но для меня он новый) реализации перетаскивания:
Обработать нажатие мыши на элементе. В этом обработчике создать обработчик события движения мыши над всем окном (window.onmousemove), в котором присваивать новые координаты перетаскиваемому элементу в соответствии с положением курсора мыши. Таким образом если мы, не отпуская клавишу мыши, будем резко водить курсором по странице, перетаскиваемый элемент никогда не "отвяжется" от курсора.
Обработать событие отпускания клавиши мыши над окном (window.onmouseup). В этом обработчике нам необходимо удалить обработчик движения мыши над окном (window.onmousemove), чтобы элемент перестал "бегать" за курсором.
После реализации данного механизма я был несколько удивлён, что не знал этого раньше. Надеюсь развеял не только свои заблуждения __________________________________ Оригинал статьи размещен в моем блоге.
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».