diff --git a/2-ui/3-event-details/5-drag-and-drop-objects/article.md b/2-ui/3-event-details/5-drag-and-drop-objects/article.md index 3653dc8e..232361f2 100644 --- a/2-ui/3-event-details/5-drag-and-drop-objects/article.md +++ b/2-ui/3-event-details/5-drag-and-drop-objects/article.md @@ -187,7 +187,7 @@ document.onmousemove = function(e) { // аватар создан успешно // создать вспомогательные свойства shiftX/shiftY - var coords = getCoords(avatar); + var coords = getCoords(dragObject.avatar); dragObject.shiftX = dragObject.downX - coords.left; dragObject.shiftY = dragObject.downY - coords.top; @@ -343,7 +343,7 @@ function findDroppable(event) { return null; } - return target.closest('.droppable'); + return elem.closest('.droppable'); } ``` @@ -376,9 +376,9 @@ var DragManager = new function() { } ``` -Всю работу будут выполнять обработчики `onMouse*`, которые оформлены как локальные функции. В данном случае они ставятся на `document` через `on...`, но это легко поменять это на `addEventListener`. +Всю работу будут выполнять обработчики `onMouse*`, которые оформлены как локальные функции. В данном случае они ставятся на `document` через `on...`, но это легко поменять на `addEventListener`. -Код функция `onMouse*` мы подробно рассмотрели ранее, но вы сможете увидеть их в полном примере ниже. +Код функции `onMouse*` мы подробно рассмотрели ранее, но вы сможете увидеть их в полном примере ниже. Внутренний объект `dragObject` будет содержать информацию об объекте переноса. @@ -396,7 +396,7 @@ var DragManager = new function() { Задачей `DragManager` является общее управление переносом. Что же касается действий при его окончании -- их должен назначить внешний код, который использует `DragManager`. -Можно сделать это через вспомогательные методы `onDrag*`, которые устанавливаются внешним кодом и затем вызываются фреймворком. Разработчик, подключив `DragManager`, описывает в этих методах, что делать при начале и завершении переноса. Конечно же, можно заменить методы `onDrag*` на генерацию "своих" событий. +Можно сделать это через вспомогательные методы `onDrag*`, которые устанавливаются внешним кодом и затем вызываются фреймворком. Разработчик, подключив `DragManager`, описывает в этих методах, что делать при завершении или отмене переноса. Конечно же, можно заменить методы `onDrag*` на генерацию "своих" событий. С использованием `DragManager` пример, с которого начиналась эта глава -- перенос иконок браузеров в компьютер, реализуется совсем просто: @@ -514,11 +514,11 @@ DragManager.onDragCancel = function(dragObject) { Уточнённый алгоритм Drag'n'Drop:
  1. При `mousedown` запомнить координаты нажатия.
  2. -
  3. При `mousemove` инициировать перенос, как только зажатый элемент передвинули на 3 пикселя или больше. Сообщить во внешний код вызовом `onDragStart`.
  4. +
  5. При `mousemove` инициировать перенос, как только зажатый элемент передвинули на 3 пикселя или больше. Сообщить во внешний код вызовом `onDragStart`. При этом:
    1. -
    2. Создать аватар, если можно начать перенос с этой точки `draggable`.
    3. -
    4. Перемещать его по экрану, новые координаты ставить по `e.pageX/pageY` с учетом изначального сдвига элемента относительно курсора.
    5. -
    6. Сообщать во внешний код о текущем `droppable` под курсором и позиции над ним вызовами `onDragEnter`, `onDragMove`, `onDragLeave`.
    7. +
    8. Создать аватар, если можно начать перенос элемента `draggable` с данной позиции курсора.
    9. +
    10. Переместить аватар по экрану, установив его новую позицию из `e.pageX/pageY` с учетом изначального сдвига элемента относительно курсора.
    11. +
    12. Сообщить во внешний код о текущем `droppable` под курсором и позиции над ним вызовами `onDragEnter`, `onDragMove`, `onDragLeave`.
  6. При `mouseup` обработать завершение переноса. Элемент под аватаром получить по координатам, предварительно спрятав аватар. Сообщить во внешний код вызовом `onDragEnd`.