Merge pull request #252 from pierangelomiceli/017_dnd

longo-andrea · web-flow · commit 166c6e64d678 · 2021-03-15T20:53:43.000+01:00
Drag'n'Drop with mouse events
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
@@ -1,5 +1,5 @@
-As we can see from HTML/CSS, the slider is a `<div>` with a colored background, that contains a runner -- another `<div>` with `position:relative`.
+Come possiamo notare dall'HTML/CSS, lo slider è un `<div>` con sfondo colorato, che contiene un altro `<div>` con `position:relative`.
 
-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`.
+Per posizionare il cursore useremo `position:relative`, per fornire le coordinate relative al genitore, ed in questo caso è meglio usarlo al posto di `position:absolute`.
 
-Then we implement horizontal-only Drag'n'Drop with limitation by width.
+Quindi andremo a implementare il Drag'n'Drop esclusivamente orizzontale con il vincolo sulla larghezza.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/solution.view/index.html
@@ -16,18 +16,18 @@
     let thumb = slider.querySelector('.thumb');
 
     thumb.onmousedown = function(event) {
-      event.preventDefault(); // prevent selection start (browser action)
+      event.preventDefault(); // previene dal cominciare la selezione (browser action)
 
       let shiftX = event.clientX - thumb.getBoundingClientRect().left;
-      // shiftY not needed, the thumb moves only horizontally
+      // shiftY non necessario, la thumb si muove solo orizzontalmente
 
       document.addEventListener('mousemove', onMouseMove);
       document.addEventListener('mouseup', onMouseUp);
 
       function onMouseMove(event) {
         let newLeft = event.clientX - shiftX - slider.getBoundingClientRect().left;
 
-        // the pointer is out of slider => lock the thumb within the bounaries
+        // il puntatore è fuori dallo slider => blocca la thumb all'interno dei confini
         if (newLeft < 0) {
           newLeft = 0;
         }
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/source.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/source.view/index.html
@@ -13,7 +13,7 @@
   </div>
 
   <script>
-    // ...your code...
+    // ...il tuo codice...
   </script>
 
 </body>
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md b/2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md
@@ -4,13 +4,13 @@ importance: 5
 
 # Slider
 
-Create a slider:
+Creare uno cursore a scorrimento:
 
 [iframe src="solution" height=60 border=1]
 
-Drag the blue thumb with the mouse and move it.
+Trascinare il cursore blu con il mouse e spostarlo.
 
-Important details:
+Dettagli importanti:
 
-- When the mouse button is pressed, during the dragging the mouse may go over or below the slider. The slider will still work (convenient for the user).
-- If the mouse moves very fast to the left or to the right, the thumb should stop exactly at the edge.
+- Quando si preme il pulsante del mouse, durante il trascinamento il mouse dovrebbe poter andare sotto o sopra il cursore, senza interromperlo (comodo per l'utente).
+- Se il mouse si muove molto velocemente da sinistra a destra, il cursore si dovrebbe fermare esattamente sul bordo.
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
@@ -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 lay the element into the document.
+Per trascinare l'elemento possiamo usare `position:fixed`, il quale semplifica la gestione delle coordinate. Alla fine dovremmo tornare ad utilizzare `position:absolute` per posizionare l'elemento all'interno del document.
 
-When coordinates are at window top/bottom, we use `window.scrollTo` to scroll it.
+Se le coordinate sono in alto/basso rispetto alla finestra, useremo `window.scrollTo` per scrollare la pagina fino al punto desiderato.
 
-More details in the code, in comments.
+Maggiori informazioni nel codice, tra i commenti.
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/index.html
@@ -8,17 +8,17 @@
 
 <body>
 
-  <h2>Place superheroes around the soccer field.</h2>
+  <h2>Posizionare i supereroi nel campo di calcio.</h2>
 
-  <p>Superheroes and the ball are elements with the class "draggable". Make them really draggable.</p>
+  <p>I supereroi ed il pallone sono elementi che hanno la classe "draggable". Renderli realmente trascinabili.</p>
 
-  <p>Important: limit dragging by the window. If a draggable reaches window top or bottom, then the page should scroll to let us drag it further.</p>
+  <p>Importante: limitare il trascinamento nella finestra. Se un oggetto trascinabile arriva sulla parte alta o bassa dello schermo la pagina dovrebbe scrollare per permettere di proseguire il trascinamento.</p>
 
-  <p>If your screen is big enough to fit the whole document -- make the window smaller to get vertical scrolling, so that you could test it.</p>
+  <p>Se lo schermo è abbastanza grande da contenere l'intero documento, rendere la finestra più piccola per poter attivare lo scrolling verticale, in modo da poterlo testare.</p>
 
-  <p>In this task it's enough to handle vertical scrolling. There's no horizontal scrolling usually, and it's handled the similar way if needed.</p>
+  <p>Per questa attività, gestire lo scrolling verticale è sufficiente. Quello orizzontale solitamente non è previsto, ma verrebbe gestito in modo simile nel caso servisse.</p>
 
-  <p>And one more thing: heroes may never leave the page. If they reach the edge of the document, no dragging outside of it.</p>
+  <p>E ancora: gli eroi non dovrebbero mai lasciare l'area della pagina. Se arrivassero al bordo del documento, non dovrebbero essere trascinati all'esterno.</p>
 
   <div id="field">
 
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.css b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.css
@@ -10,7 +10,7 @@ html, body {
   float: left;
 }
 
-/* heroes and the ball (dragables) */
+/* eroi e pallone (draggables) */
 
 .hero {
   background: url(https://js.cx/drag-heroes/heroes.png);
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js
@@ -24,9 +24,9 @@ document.addEventListener('mousedown', function(event) {
     moveAt(event.clientX, event.clientY);
   }
 
-  // on drag start:
-  //   remember the initial shift
-  //   move the element position:fixed and a direct child of body
+  // all'inizio del trascinamento:
+  //   memorizza lo spostamento iniziale
+  //   sposta l'elemento con position:fixed come diretto figlio del body
   function startDrag(element, clientX, clientY) {
     if(isDragging) {
       return;
@@ -45,7 +45,7 @@ document.addEventListener('mousedown', function(event) {
     moveAt(clientX, clientY);
   };
 
-  // switch to absolute coordinates at the end, to fix the element in the document
+  // cambia su coordinate absolute alla fine, per fissare l'elemento nel docuemnto
   function finishDrag() {
     if(!isDragging) {
       return;
@@ -61,49 +61,49 @@ document.addEventListener('mousedown', function(event) {
   }
 
   function moveAt(clientX, clientY) {
-    // new window-relative coordinates
+    // nuove coordinate relative alla window
     let newX = clientX - shiftX;
     let newY = clientY - shiftY;
 
-    // check if the new coordinates are below the bottom window edge
-    let newBottom = newY + dragElement.offsetHeight; // new bottom
+    // controlla se le nuove coordinate sono sotto il bordo della finestra
+    let newBottom = newY + dragElement.offsetHeight; // nuovo bottom
 
-    // below the window? let's scroll the page
+    // sotto la finestra? scrolliamo la pagina
     if (newBottom > document.documentElement.clientHeight) {
-      // window-relative coordinate of document end
+      // coordinate relative alla window della fine del documento
       let docBottom = document.documentElement.getBoundingClientRect().bottom;
 
-      // scroll the document down by 10px has a problem
-      // it can scroll beyond the end of the document
-      // Math.min(how much left to the end, 10)
+      // lo scrolling del documento giù di 10px porta il problema che
+      // può scrollare oltre la fine del document
+      // Math.min(quanto a sinistra dall fine, 10)
       let scrollY = Math.min(docBottom - newBottom, 10);
 
-      // calculations are imprecise, there may be rounding errors that lead to scrolling up
-      // that should be impossible, fix that here
+      // i calcoli sono imprecisi, perché potrebbero esserci errori di arrotondamento che portano a scollare in su
+      // la cui cosa dovrebbe essere impossibile, e quindi lo aggiustiamo
       if (scrollY < 0) scrollY = 0;
 
       window.scrollBy(0, scrollY);
 
-      // a swift mouse move make put the cursor beyond the document end
-      // if that happens -
-      // limit the new Y by the maximally possible (right at the bottom of the document)
+      // un movimento rapido del mouse porta il cursore oltre la fine del documento
+      // se succede
+      // limitiamo la nuova Y al massimo possibile (giusto poco sopra il documento)
       newY = Math.min(newY, document.documentElement.clientHeight - dragElement.offsetHeight);
     }
 
-    // check if the new coordinates are above the top window edge (similar logic)
+    // controlla se le nuove coordinate sono sopra i bordi superiori (logica simile)
     if (newY < 0) {
-      // scroll up
+      // scrolla in alto
       let scrollY = Math.min(-newY, 10);
-      if (scrollY < 0) scrollY = 0; // check precision errors
+      if (scrollY < 0) scrollY = 0; // controlla la precisione degli errori
 
       window.scrollBy(0, -scrollY);
-      // a swift mouse move can put the cursor beyond the document start
-      newY = Math.max(newY, 0); // newY may not be below 0
+      // un movimento rapido del mouse porta il cursore oltre l'inizio del documento
+      newY = Math.max(newY, 0); // newY non dovrebbe essere meno di 0
     }
 
 
-    // limit the new X within the window boundaries
-    // there's no scroll here so it's simple
+    // limita la nuova X all'interno dei limiti della finestra
+    // qui non abbiamo scrolling quindi è semplice
     if (newX < 0) newX = 0;
     if (newX > document.documentElement.clientWidth - dragElement.offsetWidth) {
       newX = document.documentElement.clientWidth - dragElement.offsetWidth;
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/index.html
@@ -8,17 +8,17 @@
 
 <body>
 
-  <h2>Place superheroes around the soccer field.</h2>
+  <h2>Posizionare i supereroi nel campo di calcio.</h2>
 
-  <p>Superheroes and the ball are elements with the class "draggable". Make them really draggable.</p>
+  <p>I supereroi ed il pallone sono elementi che hanno la classe "draggable". Renderli realmente trascinabili.</p>
 
-  <p>Important: limit dragging by the window. If a draggable reaches window top or bottom, then the page should scroll to let us drag it further.</p>
+  <p>Importante: limitare il trascinamento nella finestra. Se un oggetto trascinabile arriva sulla parte alta o bassa dello schermo, la pagina dovrebbe scrollare per permettere proseguire il trascinamento.</p>
 
-  <p>If your screen is big enough to fit the whole document -- make the window smaller to get vertical scrolling, so that you could test it.</p>
+  <p>Se lo schermo è abbastanza grande da contenere l'intero documento, rendere la finestra più piccola per poter attivare lo scrolling verticale, in modo da poterlo testare.</p>
 
-  <p>In this task it's enough to handle vertical scrolling. There's no horizontal scrolling usually, and it's handled the similar way if needed.</p>
+  <p>Per questa attività, gestire lo scrolling verticale è sufficiente. Quello orizzontale solitamente non è previsto, ma verrebbe gestito in modo simile nel caso servisse.</p>
 
-  <p>And one more thing: heroes may never leave the page. If they reach the edge of the document, no dragging outside of it.</p>
+  <p>E ancora: gli eroi non dovrebbero mai lasciare l'area della pagina. Se arrivassero al bordo del documento, non dovrebbero essere trascinati all'esterno.</p>
 
   <div id="field">
 
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/soccer.css b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/soccer.css
@@ -10,7 +10,7 @@ html, body {
   float: left;
 }
 
-/* heroes and the ball (dragables) */
+/* eroi e pallone (draggables) */
 
 .hero {
   background: url(https://js.cx/drag-heroes/heroes.png);
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/soccer.js b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/source.view/soccer.js
@@ -1 +1 @@
-// Your code
+// il tuo codice
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
@@ -2,19 +2,19 @@ importance: 5
 
 ---
 
-# Drag superheroes around the field
+# Trascina i supereroi nel campo
 
-This task can help you to check understanding of several aspects of Drag'n'Drop and DOM.
+Questa attività può essere d'aiuto per comprendere vari aspetti del Drag'n'Drop e del DOM.
 
-Make all elements with class `draggable` -- draggable. Like a ball in the chapter.
+Rendere tutti gli elementi trascinabili, attraverso la classe `draggable`, come il pallone nel capitolo appena studiato.
 
-Requirements:
+Requisiti:
 
-- 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 (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.
+- Utilizzare la event delegation per tenere traccia dell'inizio del trascinamento: un solo gestore evento sul  `document` per il `mousedown`.
+- Se gli elementi vengono trascinati verso i bordi in alto o in basso, la pagina deve scrollare di conseguenza.
+- Lo scroll in orizzontale non è previsto, (il che rende l'attività più semplice, aggiungerlo è facile).
+- Gli elementi trascinabili o le loro parti non devono mai uscire fuori dalla finestra, anche dopo movimenti veloci.
 
-The demo is too big to fit it here, so here's the link.
+La demo è troppo grande per essere inclusa qui, quindi ecco il link.
 
 [demo src="solution"]
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
diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/ball4.view/index.html b/2-ui/3-event-details/4-mouse-drag-and-drop/ball4.view/index.html

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ html, body {`
`10`	`10`	`float: left;`
`11`	`11`	`}`
`12`	`12`
`13`		`-/* heroes and the ball (dragables) */`
	`13`	`+/* eroi e pallone (draggables) */`
`14`	`14`
`15`	`15`	`.hero {`
`16`	`16`	`background: url(https://js.cx/drag-heroes/heroes.png);`