Update article.md

Author: alfiya-udc

2-ui/3-event-details/4-mouse-drag-and-drop/article.md

@@ -6,7 +6,7 @@ Drag'n'Drop - отличный способ улучшить интерфейс.
 
 Они интересны тем, что позволяют легко решать простые задачи. Например, можно перетащить файл в браузер, так что JS получит доступ к его содержимому.
 
-Но у встроенных событий, входящих в Drag’n’Drop, также есть ограничения.  Например, нельзя организовать перенос «только по горизонтали» или «только по вертикали». Также нельзя ограничить перенос внутри заданной зоны. Есть и другие интерфейсные задачи, которые такими встроенными событиями нереализуемы.
+Но у встроенных событий, входящих в Drag’n’Drop, также есть ограничения. Например, нельзя организовать перенос "только по горизонтали" или "только по вертикали". Также нельзя ограничить перенос внутри заданной зоны. Есть и другие интерфейсные задачи, которые такими встроенными событиями нереализуемы.
 
 Поэтому здесь мы будем рассматривать Drag’n’Drop при помощи событий мыши. Это не так уж сложно.
 
@@ -19,7 +19,7 @@ Drag'n'Drop - отличный способ улучшить интерфейс.
 3. При наступлении `mousemove` передвигаем элемент на новые координаты путём смены `left/top` и `position:absolute`.
 4. На `mouseup` (при отпускании кнопки мыши) -- остановить перенос элемента и произвести все действия, связанные с окончанием Drag’n’Drop..
 
-Это есть база Drag'n'Drop. Мы могли бы расширить этот алгоритм, например, подсветив элементы при наведении на них курсора.
+Это и есть база Drag'n'Drop. Мы могли бы расширить этот алгоритм, например, подсветив элементы при наведении на них курсора.
 
 В следующем примере эти шаги реализованы для переноса мяча:
 
@@ -58,7 +58,7 @@ ball.onmousedown = function(event) { // (1) отследить нажатие
 };
 ```
 
-Если запустить этот код, то мы заметим нечто странное. При начале переноса мяч «раздваивается» и переносится не сам мяч, а его «клон».
+Если запустить этот код, то мы заметим нечто странное. При начале переноса мяч "раздваивается" и переносится не сам мяч, а его "клон".
 
 ```online
 Это можно увидеть в действии:
@@ -88,7 +88,7 @@ ball.ondragstart = function() {
 
 Ещё одна особенность правильного Drag’n’Drop -- событие `mousemove` отслеживается на `document`, а не на `ball`. С первого взгляда кажется, что мышь всегда над мячом и обработчик `mousemove` можно повесить на сам мяч, а не на документ.
 
-Но как мы помним, событие `mousemove` возникает хоть и часто, но не для каждого пикселя. Поэтому из-за быстрого движения курсор может выпрыгнуть и оказаться где-нибудь в середине документа (или даже за пределами окна).
+Но как мы помним, событие `mousemove` возникает хоть и часто, но не для каждого пикселя. Поэтому из-за быстрого движения курсор может спрыгнуть с мяча и оказаться где-нибудь в середине документа (или даже за пределами окна).
 
 Вот почему мы должны отслеживать `mousemove` на всём `document`.
 
@@ -101,11 +101,11 @@ ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
 ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
 ```
 
-Неплохо, но есть побочные эффекты. В частности, в самом начале переноса, особенно если мячик «взят» за край – он резко «прыгает» центром под курсор мыши.
+Неплохо, но есть побочные эффекты. В частности, в самом начале переноса, особенно если мячик "взят" за край – он резко "прыгает" центром под курсор мыши.
 
 Было бы лучше, если бы изначальный сдвиг курсора относительно элемента сохранялся.
 
-Где захватили, за ту «часть элемента» и переносим:
+Где захватили, за ту "часть элемента" и переносим:
 
 ![](ball_shift.png)
 
@@ -178,7 +178,7 @@ ball.ondragstart = function() {
 [iframe src="ball3" height=230]
 ```
 
-Различие особенно заметно, если захватить мяч за правый нижний угол. В предыдущем примере мячик «прыгнет» серединой под курсор, в этом – будет плавно переноситься с текущей позиции.
+Различие особенно заметно, если захватить мяч за правый нижний угол. В предыдущем примере мячик "прыгнет" серединой под курсор, в этом – будет плавно переноситься с текущей позиции.
 
 ## Выявление droppable
 
@@ -217,7 +217,7 @@ ball.ondragstart = function() {
 
 Так что же делать?
 
-Существует метод `document.elementFromPoint(clientX, clientY)`. Он возвращает наиболее глубоко вложенный элемент по заданным координатам окна (или `null` если координаты находятся за пределами окна).
+Существует метод `document.elementFromPoint(clientX, clientY)`. Он возвращает наиболее глубоко вложенный элемент по заданным координатам окна (или `null`, если координаты находятся за пределами окна).
 
 Таким образом, через любой из наших обработчиков событий мыши мы можем обнаружить тот элемент, который потеницально мог бы принять на себя конец перемещения:
 
@@ -226,7 +226,7 @@ ball.ondragstart = function() {
 ball.hidden = true; // (*)
 let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
 ball.hidden = false;
-// elemBelow - элемент под шаром. Если на нем можно закончить перемещение, мы сможем этим управлять.
+// elemBelow - элемент под шаром. Если на нём можно закончить перемещение, мы сможем этим управлять.
 ```
 
 Заметим, нам нужно спрятать мяч перед вызовом функции `(*)`. В противном случае по этим координатам мы будем получать мяч, ведь это и есть элемент непосредственно под указателем: `elemBelow=ball`.
@@ -275,7 +275,7 @@ function onMouseMove(event) {
 
 [codetabs height=250 src="ball4"]
 
-Теперь в течение всего процесса в переменной `currentDroppable` мы храним текущую «цель удаления», и мы можем использовать её для того, чтобы выделить цель, или для любых других вещей.
+Теперь в течение всего процесса в переменной `currentDroppable` мы храним текущую "цель удаления", и мы можем использовать её для того, чтобы выделить цель, или для любых других вещей.
 
 ## Итого