withArtur

# 🎯 Eventi di Drag and Drop

⚠️ **IMPORTANTE**: Gli eventi di drag and drop HTML5 **NON funzionano sui dispositivi mobile!** 
Su smartphone e tablet dovrai usare gli eventi `touch` o librerie specializzate.

Gli eventi di drag and drop HTML5 non funzionano sui dispositivi mobile! 
È una limitazione importante da conoscere.

Sui dispositivi mobile (smartphone e tablet) non esistono gli eventi dragstart, drag, drop, ecc. perché il paradigma di interazione è diverso - si usano i tocchi invece del mouse.
Perché non funziona su mobile?

withArtur

DOM Events - Guida per Principianti

Gli eventi DOM permettono al tuo codice JavaScript di reagire alle azioni dell'utente e ai cambiamenti nella pagina web. Ecco una panoramica completa degli eventi più importanti.

Altri Cheat Sheet:

• 🎯 JS DOM functions (Manipolazione DOM in Javascript)
• 🎯 Eventi di Drag and Drop

Come Ascoltare gli Eventi

withArtur

JS DOM

Altri Cheat Sheet:

• 🎯 JS DOM functions (Manipolazione DOM in Javascript)
• JS events (Eventi in Javascript)
• Eventi di Drag and Drop

1. Selezione degli Elementi

• document.getElementById(id): seleziona un elemento per il suo id.
• document.getElementsByClassName(className): seleziona tutti gli elementi con una certa classe.

withArtur

VSCode top shortcuts / migliori scorciatoie di tastiera

Navigazione

Shortcut	Descrizione
CTRL + MAIUSC + E o CTRL + 0	Apri finestra Explorer dei file
CTRL + 1	Vai con il cursore al editor
CTRL + B	Apri/Chiudi sidebar di sinistra
CTRL + MAIUSC + G	Apri finestra Git della sidebar

withArtur

1. forEach()

• Scopo: Eseguire una funzione di callback per ogni elemento dell'array.
• Restituisce: undefined. Non restituisce un nuovo array.
• Utilizzo: Quando vuoi semplicemente eseguire un'azione per ogni elemento, senza bisogno di creare un nuovo array o di restituire un valore.

Esempio:

const numeri = [1, 2, 3, 4, 5];

withArtur

/**
 * Bootstrap 4 all media queries #wMQ
 * up       >     sm, md, lg, xl
 * down     <     sm, md, lg
 * only     =     xs, sm, lg, xl
 * between  <>    sm-lg, sm-xl, md-xl
 */


/* .xs = | Extra Small devices only (portrait phones) less than 576px */