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

Grammar

Browse source
This commit is contained in:
simmayor 2018-12-11 22:02:30 -05:00
parent 23b5766b82
commit a9756766a0
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