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

Merge pull request #674 from simmayor/4-mouse-drag

Browse source 
4-mouse-drag- - Grammar
This commit is contained in:
Ilya Kantor 2018-12-15 19:04:39 +03:00 • committed by GitHub
commit 6910b7c3f0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -15,7 +15,7 @@ So here we'll see how to implement Drag'n'Drop using mouse events. Not that hard
The basic Drag'n'Drop algorithm looks like this:
1. Catch `mousedown` on a draggable element.
2. Prepare the element to moving (maybe create a copy of it or whatever).
2. Prepare the element for moving (maybe create a copy of it or whatever).
3. Then on `mousemove` move it by changing `left/top` and `position:absolute`.
4. On `mouseup` (button release) -- perform all actions related to a finished Drag'n'Drop.
@ -58,7 +58,7 @@ ball.onmousedown = function(event) { // (1) start the process
};
```
If we run the code, we can notice something strange. On the beginning of the drag'n'drop, the ball "forks": we start to dragging it's "clone".
If we run the code, we can notice something strange. On the beginning of the drag'n'drop, the ball "forks": we start dragging its "clone".
```online
Here's an example in action:
@ -178,7 +178,7 @@ In action (inside `<iframe>`):
[iframe src="ball3" height=230]
```
The difference is especially noticeable if we drag the ball by it's right-bottom corner. In the previous example the ball "jumps" under the pointer. Now it fluently follows the cursor from the current position.
The difference is especially noticeable if we drag the ball by its right-bottom corner. In the previous example the ball "jumps" under the pointer. Now it fluently follows the cursor from the current position.
## Detecting droppables