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 6d8878d4a..271b97355 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,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
index c364b42d9..90b638600 100644
--- 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,10 +16,10 @@
     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);
@@ -27,7 +27,7 @@
       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
index a9a545c09..e9144b13a 100644
--- 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
index 0c6da4e2c..596bac498 100644
--- 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
index 62cbdb9c5..8a71f0c7f 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 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
index d79ef30a4..ae0ea06cc 100644
--- 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
index 00d5d70fc..ee268e01a 100644
--- 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
index 10ae2eeed..94025b4e5 100644
--- 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
index d79ef30a4..a4c371da8 100644
--- 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
index 00d5d70fc..ee268e01a 100644
--- 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
index ee04fda1c..6906f1aee 100644
--- 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
index 91fbaa0f2..a2e89e3b9 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
@@ -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
index 6cb1152c1..b2e6003ae 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
@@ -1,54 +1,54 @@
-# Drag'n'Drop with mouse events
+# Drag'n'Drop con gli eventi del mouse
 
-Drag'n'Drop is a great interface solution. Taking something and dragging and dropping it is a clear and simple way to do many things, from copying and moving documents (as in file managers) to ordering (dropping items into a cart).
+Il Drag'n'Drop, in termini di interfaccia utente, è una soluzione grandiosa. Il fatto di poter prendere qualcosa, trascinarla e rilasciarla è un modo semplice ed intuitivo per fare tantissime operazioni, dal copiare e spostare documenti (come nei gestori di files), al fare un ordine online (rilasciando un prodotto in un carrello).
 
-In the modern HTML standard there's a [section about Drag and Drop](https://html.spec.whatwg.org/multipage/interaction.html#dnd) with special events such as `dragstart`, `dragend`, and so on.
+Nello standard HTML attuale c'è una [sezione sul Drag and Drop](https://html.spec.whatwg.org/multipage/interaction.html#dnd) con eventi speciali come `dragstart`, `dragend`, e via dicendo.
 
-These events allow us to support special kinds of drag'n'drop, such as handling dragging a file from OS file-manager and dropping it into the browser window. Then JavaScript can access the contents of such files.
+Questi eventi ci permettono di supportare tipi particolari di drag'n'drop, come gestire il trascinamento di un file dal sistema operativo ed il rilascio dentro la finestra del browser, in modo che JavaScript possa accedere al contenuto di tali files.
 
-But native Drag Events also have limitations. For instance, we can't prevent dragging from a certain area. Also we can't make the dragging "horizontal" or "vertical" only. And there are many other drag'n'drop tasks that can't be done using them. Also, mobile device support for such events is very weak.
+Ma i Drag Events hanno anche delle limitazioni. Ad esempio, non possiamo prevenire il trascinamento da una certa sezione. Inoltre non possiamo rendere il trascinamento solo "orizzontale" o "verticale". E ci sono tante altre azioni drag'n'drop che non è possibile sfruttare. Inoltre il supporto dei dispositivi mobile per questo tipo di eventi è abbastanza scarso.
 
-So here we'll see how to implement Drag'n'Drop using mouse events.
+Di conseguenza, vedremo come implementare il Drag'n'Drop solo tramite l'utilizzo degli eventi del mouse.
 
-## Drag'n'Drop algorithm
+## Algortimo del Drag'n'Drop
 
-The basic Drag'n'Drop algorithm looks like this:
+L'algoritmo di base del Drag'n'Drop è qualcosa del genere:
 
-1. On `mousedown` - prepare the element for moving, if needed (maybe create a clone of it, add a class to it or whatever).
-2. Then on `mousemove` move it by changing `left/top` with `position:absolute`.
-3. On `mouseup` - perform all actions related to finishing the drag'n'drop.
+1. Al `mousedown` - prepara l'elemento per lo spostamento, se necessario (magari crea un suo clone, o aggiungi una classe o altro).
+2. Quindi al `mousemove` spostalo variando `left/top` con il `position:absolute`.
+3. Al `mouseup` - esegui tutte le azioni coinvolte per completare il drag'n'drop.
 
-These are the basics. Later we'll see how to other features, such as highlighting current underlying elements while we drag over them.
+Queste sono le basi. Dopo vedremo come gestire altre caratteristiche, come evidenziare gli altri elementi sottostanti mentre effettuiamo il trascinamento su di essi.
 
-Here's the implementation of dragging a ball:
+Ecco un'implementazione del trascinamento di un pallone:
 
 ```js
 ball.onmousedown = function(event) { 
-  // (1) prepare to moving: make absolute and on top by z-index
+  // (1) preparazione dello spostamento: imposta il posizionamento assoluto e lo z-index al massimo valore utile
   ball.style.position = 'absolute';
   ball.style.zIndex = 1000;
 
-  // move it out of any current parents directly into body
-  // to make it positioned relative to the body
+  // spostamento all'esterno da ogni elemento genitore e direttamente verso il body della pagina
+  // per posizionarlo relativamente ad esso
   document.body.append(ball);  
 
-  // centers the ball at (pageX, pageY) coordinates
+  // centratura del pallone alle coordinate (pageX, pageY)
   function moveAt(pageX, pageY) {
     ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
     ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
   }
 
-  // move our absolutely positioned ball under the pointer
+  // spostamento del nostro pallone con posizionamento assoluto sotto il puntatore
   moveAt(event.pageX, event.pageY);
 
   function onMouseMove(event) {
     moveAt(event.pageX, event.pageY);
   }
 
-  // (2) move the ball on mousemove
+  // (2) spostamento del pallone al mousemove
   document.addEventListener('mousemove', onMouseMove);
 
-  // (3) drop the ball, remove unneeded handlers
+  // (3) rilascio del pallone, rimozione dei gestori non necessari
   ball.onmouseup = function() {
     document.removeEventListener('mousemove', onMouseMove);
     ball.onmouseup = null;
@@ -57,19 +57,19 @@ ball.onmousedown = function(event) {
 };
 ```
 
-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".
+Eseguendo il codice, noteremo qualcosa di anomalo. All'inizio del drag'n'drop, il pallone si "duplica": abbiamo cominciato trascinando il suo "clone".
 
 ```online
-Here's an example in action:
+Ecco un esempio in azione:
 
 [iframe src="ball" height=230]
 
-Try to drag'n'drop with the mouse and you'll see such behavior.
+Prova a fare il drag'n'drop con il mouse per vedere questo comportamento anomalo.
 ```
 
-That's because the browser has its own drag'n'drop support for images and some other elements. It runs automatically and conflicts with ours.
+Questo accade perché il browser ha una sua implementazione del drag'n'drop per immagini e qualche altro elemento. La esegue in automatico e va quindi in conflitto con la nostra.
 
-To disable it:
+Per disabilitarlo:
 
 ```js
 ball.ondragstart = function() {
@@ -77,42 +77,42 @@ ball.ondragstart = function() {
 };
 ```
 
-Now everything will be all right.
+Ora è tutto a posto.
 
 ```online
-In action:
+In azione:
 
 [iframe src="ball2" height=230]
 ```
 
-Another important aspect -- we track `mousemove` on `document`, not on `ball`. From the first sight it may seem that the mouse is always over the ball, and we can put `mousemove` on it.
+Un altro aspetto importante -- noi teniamo traccia di `mousemove` nel `document`, non su `ball`. A prima vista potrebbe sembrare che il mouse sia sempre sopra il pallone, e possiamo attivare `mousemove` su di essa.
 
-But as we remember, `mousemove` triggers often, but not for every pixel. So after swift move the pointer can jump from the ball somewhere in the middle of document (or even outside of the window).
+ Ma come noto, `mousemove` viene generato spesso, ma non per ogni pixel. Quindi a seguito di qualche movimento rapido potrebbe saltare dal pallone a qualche punto nel bel mezzo del documento (o anche fuori dalla finestra).
 
-So we should listen on `document` to catch it.
+Di conseguenza dovremmo metterci in ascolto sul `document` per la cattura.
 
-## Correct positioning
+## Posizionamento corretto
 
-In the examples above the ball is always moved so, that it's center is under the pointer:
+Negli esempi precedenti il pallone viene sempre spostato in modo che il suo centro sia sotto il puntatore:
 
 ```js
 ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
 ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
 ```
 
-Not bad, but there's a side-effect. To initiate the drag'n'drop, we can `mousedown` anywhere on the ball. But if "take" it from its edge, then the ball suddenly "jumps" to become centered under the mouse pointer.
+Non male, ma c'è un effetto collaterale. Per innescare il drag'n'drop, potremmo cominciare `mousedown` da un punto qualunque del pallone. Ma se lo "prendessimo" dai bordi, si centrerebbe repentinamente sotto il puntatore facendo una specie di "salto".
 
-It would be better if we keep the initial shift of the element relative to the pointer.
+Sarebbe meglio se mantenessimo lo spostamento iniziale dell'elemento rispetto al puntatore.
 
-For instance, if we start dragging by the edge of the ball, then the pointer should remain over the edge while dragging.
+Ad esempio, se cominciassimo dal bordo del pallone, il puntatore dovrebbe rimanere sul bordo mentre lo trasciniamo.
 
 ![](ball_shift.svg)
 
-Let's update our algorithm:
+Aggiorniamo il nostro algoritmo:
 
-1. When a visitor presses the button (`mousedown`) - remember the distance from the pointer to the left-upper corner of the ball in variables `shiftX/shiftY`. We'll keep that distance while dragging.
+1. Quando un utente preme il pulsante (`mousedown`) - memorizza la distanza del puntatore dall'angolo in alto a sinistra del pallone nelle variabili `shiftX/shiftY`. Manterremo questa distanza durante il trascinamento.
 
-    To get these shifts we can substract the coordinates:
+    Per ottenere questi scostamenti possiamo sottrarre le coordinate:
 
     ```js
     // onmousedown
@@ -120,16 +120,16 @@ Let's update our algorithm:
     let shiftY = event.clientY - ball.getBoundingClientRect().top;
     ```
 
-2. Then while dragging we position the ball on the same shift relative to the pointer, like this:
+2. Quindi, durante il trascinamento posizioneremo il pallone con lo stesso scostamento relativo al puntatore, in questo modo:
 
     ```js
     // onmousemove
-    // ball has position:absoute
+    // il pallone ha position:absoute
     ball.style.left = event.pageX - *!*shiftX*/!* + 'px';
     ball.style.top = event.pageY - *!*shiftY*/!* + 'px';
     ```
 
-The final code with better positioning:
+Il codice definitivo con un posizionamento ottimale:
 
 ```js
 ball.onmousedown = function(event) {
@@ -145,8 +145,8 @@ ball.onmousedown = function(event) {
 
   moveAt(event.pageX, event.pageY);
 
-  // moves the ball at (pageX, pageY) coordinates
-  // taking initial shifts into account
+  // sposta il pallone alle coordinate (pageX, pageY)
+  // tenendo conto dello scostamento iniziale
   function moveAt(pageX, pageY) {
     ball.style.left = pageX - *!*shiftX*/!* + 'px';
     ball.style.top = pageY - *!*shiftY*/!* + 'px';
@@ -156,10 +156,10 @@ ball.onmousedown = function(event) {
     moveAt(event.pageX, event.pageY);
   }
 
-  // move the ball on mousemove
+  // muovi il pallone al mousemove
   document.addEventListener('mousemove', onMouseMove);
 
-  // drop the ball, remove unneeded handlers
+  // rilascia il pallone, rimuovi i gestori non necessari
   ball.onmouseup = function() {
     document.removeEventListener('mousemove', onMouseMove);
     ball.onmouseup = null;
@@ -173,32 +173,32 @@ ball.ondragstart = function() {
 ```
 
 ```online
-In action (inside `<iframe>`):
+In azione (inside `<iframe>`):
 
 [iframe src="ball3" height=230]
 ```
 
-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 pointer from the current position.
+La differenza è particolarmente visibile se trasciniamo il pallone dall'angolo in basso a destra. Nell'esempio precedente, il pallone "salterebbe" sotto il puntatore. Adesso segue fluidamente il puntatore dalla posizione corrente.
 
-## Potential drop targets (droppables)
+## Potenziali obiettivi per il drop (droppables)
 
-In previous examples the ball could be dropped just "anywhere" to stay. In real-life we usually take one element and drop it onto another. For instance, a "file" into a "folder" or something else.
+Negli esempi precedenti il pallone può essere rilasciato "ovunque". In applicazioni concrete generalmente prendiamo un oggetto e lo lasciamo su un altro. Ad esempio, un "file" dentro una "cartella" o cose del genere.
 
-Speaking abstract, we take a "draggable" element and drop it onto "droppable" element.
+Parlando in maniera astratta, prendiamo un elemento "draggable" e lo rilasciamo su uno "droppable".
 
-We need to know:
-- where the element was dropped at the end of Drag'n'Drop -- to do the corresponding action,
-- and, preferably, know the droppable we're dragging over, to highlight it.
+Dobbiamo quindi sapere:
+- dove viene rilasciato l'elemento alla fine del Drag'n'Drop -- per eseguire l'azione corrispondente,
+- e, preferibilmente, conoscere il droppable sul quale lo stiamo rilasciando, per evidenziarlo.
 
-The solution is kind-of interesting and just a little bit tricky, so let's cover it here.
+La soluzione è piuttosto interessante e leggermente complicata, e la affronteremo qui.
 
-What may be the first idea? Probably to set `mouseover/mouseup` handlers on potential droppables?
+Quale potrebbe essere l'idea iniziale? Probabilmente quella di impostare dei gestori `mouseover/mouseup` sui potenziali droppables?
 
-But that doesn't work.
+Non funzionerebbe.
 
-The problem is that, while we're dragging, the draggable element is always above other elements. And mouse events only happen on the top element, not on those below it.
+Il problema principale, sarebbe che durante il trascinamento, l'elemento draggable è sempre sopra gli altri. E gli eventi del mouse vengono generati sull'elemento superiore, e non su quelli sotto.
 
-For instance, below are two `<div>` elements, red one on top of the blue one (fully covers). There's no way to catch an event on the blue one, because the red is on top:
+Per esempio, sotto ci sono due elementi `<div>`, uno rosso sopra uno blu (lo copre del tutto). Non c'è modo di catturare un evento su quello blu, perché il rosso sta sopra:
 
 ```html run autorun height=60
 <style>
@@ -209,38 +209,38 @@ For instance, below are two `<div>` elements, red one on top of the blue one (fu
     top: 0;
   }
 </style>
-<div style="background:blue" onmouseover="alert('never works')"></div>
-<div style="background:red" onmouseover="alert('over red!')"></div>
+<div style="background:blue" onmouseover="alert('non funziona mai')"></div>
+<div style="background:red" onmouseover="alert('sul rosso!')"></div>
 ```
 
-The same with a draggable element. The ball is always on top over other elements, so events happen on it. Whatever handlers we set on lower elements, they won't work.
+Stessa cosa per un elemento draggable. Il pallone sta sempre sopra gli altri elementi, e quindi gli eventi vengono generati su di esso. Qualunque gestore assegnassimo agli elementi sotto, non funzionerebbero.
 
-That's why the initial idea to put handlers on potential droppables doesn't work in practice. They won't run.
+Questo è il motivo per cui l'idea iniziale di impostare i gestori su dei potenziali droppables non funziona. I gestori non verrebbero eseguiti.
 
-So, what to do?
+Come fare, quindi?
 
-There's a method called `document.elementFromPoint(clientX, clientY)`. It returns the most nested element on given window-relative coordinates (or `null` if given coordinates are out of the window).
+C'è un metodo chiamato `document.elementFromPoint(clientX, clientY)` che restituisce le coordinate relative alla window, dell'elemento più annidato (o `null` se le coordinate restituite sono fuori dalla window).
 
-We can use it in any of our mouse event handlers to detect the potential droppable under the pointer, like this:
+Possiamo usarlo su qualunque nostro gestore di evento del mouse per rilevare dei potenziali droppable sotto il puntatore, in questo modo:
 
 ```js
-// in a mouse event handler
-ball.hidden = true; // (*) hide the element that we drag
+// dentro un gestore di evento del mouse
+ball.hidden = true; // (*) nasconde l'elemento che trasciniamo
 
 let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
-// elemBelow is the element below the ball, may be droppable
+// elemBelow è l'elemento sotto il pallone, potrebbe essere droppable
 
 ball.hidden = false;
 ```
 
-Please note: we need to hide the ball before the call `(*)`. Otherwise we'll usually have a ball on these coordinates, as it's the top element under the pointer: `elemBelow=ball`. So we hide it and immediately show again.
+Nota bene: abbiamo bisogno di nascondere il pallone prima della chiamata `(*)`. Altrimenti otterremmo la palla a queste coordinate, dato che sarebbe questo l'elemento più in alto sotto il puntatore: `elemBelow=ball`. Quindi lo nascondiamo per mostrarlo nuovamente immediatamente dopo.
 
-We can use that code to check what element we're "flying over" at any time. And handle the drop when it happens.
+Possiamo usare questo codice per sapere quale elemento stiamo "sorvolando" in ogni momento. E gestire il rilascio quando accade.
 
-An extended code of `onMouseMove` to find "droppable" elements:
+Un codice esteso di `onMouseMove` per individuare gli elementi "droppable":
 
 ```js
-// potential droppable that we're flying over right now
+// droppable potenziale che stiamo sorvolando in questo momento
 let currentDroppable = null;
 
 function onMouseMove(event) {
@@ -250,54 +250,54 @@ function onMouseMove(event) {
   let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
   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
+  // gli eventi mousemove possono essere generati fuori dalla window (quando il pallone è trascinato fuori dallo schermo)
+  // se clientX/clientY sono fuori dalla window, elementFromPoint restituisce null
   if (!elemBelow) return;
 
-  // potential droppables are labeled with the class "droppable" (can be other logic)
+  // i potenziali elementi droppables sono contrassegnati con la classe "droppable" (la logica potrebbe essere anche altra)
   let droppableBelow = elemBelow.closest('.droppable');
 
   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)
-    //   droppableBelow=null if we're not over a droppable now, during this event
+    // sorvolando in entrata o in uscita...
+    // nota bene: entrambi i valori potrebbero essere null
+    //   currentDroppable=null se non siamo su un elemento prima di questo evento (es. su uno spazio vuoto)
+    //   droppableBelow=null se non siamo attualmente droppable, durante questo evento
 
     if (currentDroppable) {
-      // the logic to process "flying out" of the droppable (remove highlight)
+      // la logica per elaborare "il sorvolo in uscita" dal droppable (rimuove l'evidenziatura)
       leaveDroppable(currentDroppable);
     }
     currentDroppable = droppableBelow;
     if (currentDroppable) {
-      // the logic to process "flying in" of the droppable
+      // la logica per elaborare "il sorvolo in entrata" sul droppable
       enterDroppable(currentDroppable);
     }
   }
 }
 ```
 
-In the example below when the ball is dragged over the soccer goal, the goal is highlighted.
+Nel seguente esempio, quando il pallone viene trascinato sopra la porta, la porta viene evidenziata.
 
 [codetabs height=250 src="ball4"]
 
-Now we have the current "drop target", that we're flying over, in the variable `currentDroppable` during the whole process and can use it to highlight or any other stuff.
+Adesso abbiamo l'attuale "obiettivo drop", sul quale stiamo sorvolando, dentro la variabile `currentDroppable` durante tutta l'operazione, e possiamo usarlo per evidenziarlo o per altre cose.
 
-## Summary
+## Riepilogo
 
-We considered a basic Drag'n'Drop algorithm.
+Abbiamo preso in considerazione un algoritmo base del Drag'n'Drop.
 
-The key components:
+I componenti chiave:
 
-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`.
+1. Flusso degli eventi: `ball.mousedown` -> `document.mousemove` -> `ball.mouseup` (non dimenticare di eliminare il `ondragstart` nativo).
+2. All'inizio del trascinamento -- ricorda lo scostamento iniziale del puntatore rispetto all'elemento: `shiftX/shiftY` e di mantenerlo durante tutta la fase di trascinamento.
+3. Rileva gli elementi droppable sotto il puntatore tramite `document.elementFromPoint`.
 
-We can lay a lot on this foundation.
+Possiamo trarre molto da queste basi.
 
-- 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.
-- And so on.
+- Al `mouseup` possiamo completare intelligentemente il rilascio: modificare dati, spostare degli elementi vicini.
+- Possiamo evidenziare gli elementi che stiamo sorvolando.
+- Possiamo limitare il trascinamento in una certa area o direzione.
+- Possiamo usare la event delegation per `mousedown/up`. Un gestore evento per aree vaste che controlla `event.target` può gestire centinaia di elementi.
+- E così via.
 
-There are frameworks that build architecture over it: `DragZone`, `Droppable`, `Draggable` and other classes. Most of them do the similar stuff to what's described above, so it should be easy to understand them now. Or roll your own, as you can see that that's easy enough to do, sometimes easier than adapting a third-party solution.
+Esistono frameworks che basano intere architetture su di esso: `DragZone`, `Droppable`, `Draggable` ed altre classi. La maggior parte di essi fanno cose simili a quelle appena descritte, quindi potrebbe essere semplice comprenderle adesso. Oppure potresti preparartelo da te, dal momento che abbiamo visto quanto sia facile da fare, talvolta più semplice di adattare una soluzione di terze parti.
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
index aaef2f3b8..220a99f68 100644
--- 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
@@ -44,11 +44,11 @@
 
         let droppableBelow = elemBelow.closest('.droppable');
         if (currentDroppable != droppableBelow) {
-          if (currentDroppable) { // null when we were not over a droppable before this event
+          if (currentDroppable) { // null se prima di questo evento non ci trovavamo sopra un elemento droppable
             leaveDroppable(currentDroppable);
           }
           currentDroppable = droppableBelow;
-          if (currentDroppable) { // null if we're not coming over a droppable now
+          if (currentDroppable) { // null se adesso non ci stiamo posizionando su un elemento droppable
             // (maybe just left the droppable)
             enterDroppable(currentDroppable);
           }