Rendere trascinabili gli elementi
Abiliti il trascinamento e gestisca gli eventi drag.
Rendere trascinabili gli elementi è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.
L'API HTML Drag and Drop
L'API nativa Drag and Drop API consente agli utenti di trascinare gli elementi e rilasciarli altrove. È basata sugli eventi: gli elementi sorgente generano eventi di trascinamento e le destinazioni di rilascio ne generano di propri. Non è necessaria alcuna libreria.
L'attributo draggable
Per impostazione predefinita, solo i collegamenti e le immagini sono trascinabili. Aggiunga draggable="true" per rendere trascinabile qualsiasi elemento.
<div draggable="true" id="card">Drag me</div>Impostare draggable in JS
Può attivare o disattivare questo comportamento dallo script tramite la proprietà draggable.
const card = document.getElementById("card");
card.draggable = true;L'evento dragstart
dragstart viene generato nel momento in cui inizia un trascinamento. È qui che registra l'elemento trascinato.
card.addEventListener("dragstart", (e) => {
console.log("Started dragging", card.id);
});Trasportare dati con dataTransfer
L'evento espone dataTransfer. Utilizzi setData(format, value) in dragstart per associare un payload che accompagna il trascinamento.
card.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", card.id);
});L'evento drag
drag viene generato continuamente mentre l'elemento si sposta. Lo utilizzi con parsimonia: può essere generato molte volte al secondo.
card.addEventListener("drag", (e) => {
// fires repeatedly during the drag
});L'evento dragend
dragend viene generato quando l'utente rilascia l'elemento, indipendentemente dal fatto che il rilascio sia riuscito o meno. Lo utilizzi per ripristinare lo stile dell'elemento sorgente.
card.addEventListener("dragend", (e) => {
card.classList.remove("dragging");
});Contrassegnare l'elemento sorgente
Un modello comune consiste nell'aggiungere una classe in dragstart e rimuoverla in dragend per attenuare o evidenziare l'elemento trascinato.
card.addEventListener("dragstart", () => card.classList.add("dragging"));
card.addEventListener("dragend", () => card.classList.remove("dragging"));Effetti consentiti
Imposti effectAllowed in dragstart per dichiarare quali operazioni sono valide: "copy", "move", "link" o combinazioni.
card.addEventListener("dragstart", (e) => {
e.dataTransfer.effectAllowed = "move";
});Limite sui dispositivi touch
L'API nativa offre un supporto limitato al touch sui dispositivi mobili. Per le app progettate prima di tutto per il touch, consideri Pointer Events o una libreria dedicata; l'API nativa dà il meglio di sé sui computer desktop.
Disabilitare la selezione del testo
Il trascinamento può selezionare accidentalmente del testo. Una piccola regola CSS mantiene ordinati i trascinamenti.
/* CSS */
.draggable { user-select: none; }Verifica rapida
Verifichi le nozioni di base sugli elementi trascinabili.
Riepilogo: rendere gli elementi trascinabili
Ha abilitato il trascinamento con draggable="true", gestito dragstart/drag/dragend, associato un payload tramite dataTransfer.setData, impostato effectAllowed e applicato uno stile all'elemento sorgente. Ora: le destinazioni di rilascio.
Domande Frequenti
La lezione «Rendere trascinabili gli elementi» è gratuita?
Sì — il testo completo di «Rendere trascinabili gli elementi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.
Cosa imparerò in «Rendere trascinabili gli elementi»?
Abiliti il trascinamento e gestisca gli eventi drag. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Rendere trascinabili gli elementi»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?
Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Rendere trascinabili gli elementi
- Aree di rilascio e dataTransfer
- Feedback visivo durante il trascinamento
- Trascinare file nella pagina