diff --git a/1-js/04-object-basics/03-symbol/article.md b/1-js/04-object-basics/03-symbol/article.md index 5c0bfb3e..f2b5e1ef 100644 --- a/1-js/04-object-basics/03-symbol/article.md +++ b/1-js/04-object-basics/03-symbol/article.md @@ -52,7 +52,7 @@ alert(id); // TypeError: Cannot convert a Symbol value to a string That's a "language guard" against messing up, because strings and symbols are fundamentally different and should not occasionally convert one into another. -If we really want to show a symbol, we need to call `.toString()` on it, like here: +If we really want to show a symbol, we need to explicitly call `.toString()` on it, like here: ```js run let id = Symbol("id"); *!* @@ -60,7 +60,7 @@ alert(id.toString()); // Symbol(id), now it works */!* ``` -Or get `symbol.description` property to get the description only: +Or get `symbol.description` property to show the description only: ```js run let id = Symbol("id"); *!* @@ -133,7 +133,7 @@ let id = Symbol("id"); let user = { name: "John", *!* - [id]: 123 // not just "id: 123" + [id]: 123 // not "id: 123" */!* }; ``` diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md index 28e8cffa..6d8878d4 100644 --- a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md +++ b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.md @@ -1,4 +1,5 @@ +As we can see from HTML/CSS, the slider is a `
` with a colored background, that contains a runner -- another `
` with `position:relative`. -We have a horizontal Drag'n'Drop here. +To position the runner we use `position:relative`, to provide the coordinates relative to its parent, here it's more convenient here than `position:absolute`. -To position the element we use `position:relative` and slider-relative coordinates for the thumb. Here it's more convenient here than `position:absolute`. +Then we implement horizontal-only Drag'n'Drop with limitation by width. diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md index deb43b65..62cbdb9c 100644 --- a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md +++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.md @@ -1,5 +1,5 @@ -To drag the element we can use `position:fixed`, it makes coordinates easier to manage. At the end we should switch it back to `position:absolute`. +To drag the element we can use `position:fixed`, it makes coordinates easier to manage. At the end we should switch it back to `position:absolute` to lay the element into the document. -Then, when coordinates are at window top/bottom, we use `window.scrollTo` to scroll it. +When coordinates are at window top/bottom, we use `window.scrollTo` to scroll it. More details in the code, in comments. diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md index 16add0cf..91fbaa0f 100644 --- a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md +++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md @@ -12,8 +12,8 @@ Requirements: - Use event delegation to track drag start: a single event handler on `document` for `mousedown`. - If elements are dragged to top/bottom window edges -- the page scrolls up/down to allow further dragging. -- There is no horizontal scroll. -- Draggable elements should never leave the window, even after swift mouse moves. +- There is no horizontal scroll (this makes the task a bit simpler, adding it is easy). +- Draggable elements or their parts should never leave the window, even after swift mouse moves. The demo is too big to fit it here, so here's the link. diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md index b9275fa6..721357b7 100644 --- a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md +++ b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md @@ -241,7 +241,7 @@ An extended code of `onMouseMove` to find "droppable" elements: ```js // potential droppable that we're flying over right now -let currentDroppable = null; +let currentDroppable = null; function onMouseMove(event) { moveAt(event.pageX, event.pageY); @@ -251,13 +251,13 @@ function onMouseMove(event) { ball.hidden = false; // mousemove events may trigger out of the window (when the ball is dragged off-screen) - // if clientX/clientY are out of the window, then elementfromPoint returns null + // if clientX/clientY are out of the window, then elementFromPoint returns null if (!elemBelow) return; // potential droppables are labeled with the class "droppable" (can be other logic) let droppableBelow = elemBelow.closest('.droppable'); - if (currentDroppable != droppableBelow) { // if there are any changes + if (currentDroppable != droppableBelow) { // we're flying in or out... // note: both values can be null // currentDroppable=null if we were not over a droppable before this event (e.g over an empty space) @@ -288,13 +288,13 @@ We considered a basic Drag'n'Drop algorithm. The key components: -1. Events flow: `ball.mousedown` -> `document.mousemove` -> `ball.mouseup` (cancel native `ondragstart`). +1. Events flow: `ball.mousedown` -> `document.mousemove` -> `ball.mouseup` (don't forget to cancel native `ondragstart`). 2. At the drag start -- remember the initial shift of the pointer relative to the element: `shiftX/shiftY` and keep it during the dragging. 3. Detect droppable elements under the pointer using `document.elementFromPoint`. We can lay a lot on this foundation. -- On `mouseup` we can finalize the drop: change data, move elements around. +- On `mouseup` we can intellectually finalize the drop: change data, move elements around. - We can highlight the elements we're flying over. - We can limit dragging by a certain area or direction. - We can use event delegation for `mousedown/up`. A large-area event handler that checks `event.target` can manage Drag'n'Drop for hundreds of elements.