jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Fix issues in the article and in the code samples

Browse source
This commit is contained in:
Alexander Myshov 2015-06-12 13:38:10 +05:00
parent 88732391b5
commit db791401da
1 changed files with 9 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

18
2-ui/3-event-details/5-drag-and-drop-objects/article.md
View file

@ -187,7 +187,7 @@ document.onmousemove = function(e) {
// аватар создан успешно // аватар создан успешно
// создать вспомогательные свойства shiftX/shiftY // создать вспомогательные свойства shiftX/shiftY
var coords = getCoords(avatar); var coords = getCoords(dragObject.avatar);
dragObject.shiftX = dragObject.downX - coords.left; dragObject.shiftX = dragObject.downX - coords.left;
dragObject.shiftY = dragObject.downY - coords.top; dragObject.shiftY = dragObject.downY - coords.top;
@ -343,7 +343,7 @@ function findDroppable(event) {
return null; 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` будет содержать информацию об объекте переноса. Внутренний объект `dragObject` будет содержать информацию об объекте переноса.
@ -396,7 +396,7 @@ var DragManager = new function() {
Задачей `DragManager` является общее управление переносом. Что же касается действий при его окончании -- их должен назначить внешний код, который использует `DragManager`. Задачей `DragManager` является общее управление переносом. Что же касается действий при его окончании -- их должен назначить внешний код, который использует `DragManager`.
Можно сделать это через вспомогательные методы `onDrag*`, которые устанавливаются внешним кодом и затем вызываются фреймворком. Разработчик, подключив `DragManager`, описывает в этих методах, что делать при начале и завершении переноса. Конечно же, можно заменить методы `onDrag*` на генерацию "своих" событий. Можно сделать это через вспомогательные методы `onDrag*`, которые устанавливаются внешним кодом и затем вызываются фреймворком. Разработчик, подключив `DragManager`, описывает в этих методах, что делать при завершении или отмене переноса. Конечно же, можно заменить методы `onDrag*` на генерацию "своих" событий.
С использованием `DragManager` пример, с которого начиналась эта глава -- перенос иконок браузеров в компьютер, реализуется совсем просто: С использованием `DragManager` пример, с которого начиналась эта глава -- перенос иконок браузеров в компьютер, реализуется совсем просто:
@ -514,11 +514,11 @@ DragManager.onDragCancel = function(dragObject) {
Уточнённый алгоритм Drag'n'Drop: Уточнённый алгоритм Drag'n'Drop:
<ol> <ol>
<li>При `mousedown` запомнить координаты нажатия.</li> <li>При `mousedown` запомнить координаты нажатия.</li>
<li>При `mousemove` инициировать перенос, как только зажатый элемент передвинули на 3 пикселя или больше. Сообщить во внешний код вызовом `onDragStart`.</li> <li>При `mousemove` инициировать перенос, как только зажатый элемент передвинули на 3 пикселя или больше. Сообщить во внешний код вызовом `onDragStart`. При этом:</li>
<ol> <ol>
<li>Создать аватар, если можно начать перенос с этой точки `draggable`.</li> <li>Создать аватар, если можно начать перенос элемента `draggable` с данной позиции курсора.</li>
<li>Перемещать его по экрану, новые координаты ставить по `e.pageX/pageY` с учетом изначального сдвига элемента относительно курсора.</li> <li>Переместить аватар по экрану, установив его новую позицию из `e.pageX/pageY` с учетом изначального сдвига элемента относительно курсора.</li>
<li>Сообщать во внешний код о текущем `droppable` под курсором и позиции над ним вызовами `onDragEnter`, `onDragMove`, `onDragLeave`.</li> <li>Сообщить во внешний код о текущем `droppable` под курсором и позиции над ним вызовами `onDragEnter`, `onDragMove`, `onDragLeave`.</li>
</ol> </ol>
</li> </li>
<li>При `mouseup` обработать завершение переноса. Элемент под аватаром получить по координатам, предварительно спрятав аватар. Сообщить во внешний код вызовом `onDragEnd`.</li> <li>При `mouseup` обработать завершение переноса. Элемент под аватаром получить по координатам, предварительно спрятав аватар. Сообщить во внешний код вызовом `onDragEnd`.</li>