Come utilizzare l'API di trascinamento della selezione HTML

Il trascinamento della selezione è una funzionalità essenziale che migliora l'interazione dell'utente e facilita un'esperienza utente fluida. Che tu stia cercando di creare un caricatore di file, un elenco ordinabile o un gioco interattivo, capire come sfruttare le capacità di questa API è un'abilità cruciale da avere nel tuo web kit di strumenti di sviluppo.

Le basi del drag and drop in HTML

In un tipico sistema drag-and-drop, ci sono due tipi di elementi: il primo tipo comprende elementi trascinabili che gli utenti può spostarsi con il mouse e il secondo tipo include elementi rilasciabili che in genere specificano dove gli utenti possono posizionare un file elemento.

Per implementare il trascinamento della selezione, devi dire al browser quali elementi vuoi che siano trascinabili. Per rendere un elemento trascinabile dall'utente, quell'elemento dovrebbe avere un file trascinabileAttributo HTML impostato VERO, come questo:

<divdraggable="true">This element is draggablediv>

Quando l'utente inizia a attivare un evento di trascinamento, il browser fornisce un'immagine "fantasma" predefinita che in genere fornisce feedback riguardo a un elemento trascinato.

Puoi personalizzare questa immagine fornendo invece la tua immagine. Per fare ciò, seleziona l'elemento trascinabile dal DOM, crea una nuova immagine per rappresentare l'immagine di feedback personalizzata e aggiungi un dragstart trascina il listener di eventi in questo modo:

let img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png';
document.querySelector('div').addEventListener('dragstart', (event)=>{
 event.dataTransfer.setDragImage(img, 10, 10);
})

Nel blocco di codice sopra, il file setDragImage il metodo ha tre parametri. Il primo parametro fa riferimento all'immagine. Gli altri parametri rappresentano rispettivamente gli spostamenti orizzontali e verticali dell'immagine. Quando esegui il codice nel browser e inizi a trascinare un elemento, noterai che l'immagine di trascinamento personalizzata è stata sostituita con l'immagine personalizzata impostata in precedenza.

Se vuoi consentire un rilascio, devi impedire il comportamento predefinito annullando entrambi i file dragenter E trascinare sopra eventi, come questo:

const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
 ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
 ev.preventDefault();
});

Comprendere l'interfaccia DragEvent

Funzionalità JavaScript a TrascinaEvento interfaccia che rappresenta un'interazione drag-and-drop da parte dell'utente. Di seguito è riportato un elenco dei possibili tipi di eventi in TrascinaEvento interfaccia.

• lagna: l'utente attiva questo evento mentre trascina un elemento.
• dragend: questo evento si attiva quando termina l'operazione di trascinamento o quando l'utente la interrompe. Una tipica operazione di trascinamento può terminare rilasciando il pulsante del mouse o premendo il tasto Esc.
• dragenter: un elemento trascinato attiva questo evento quando entra in una destinazione di rilascio valida.
• trascinare: quando l'elemento trascinato lascia una destinazione di rilascio, questo evento si attiva.
• trascinare sopra: quando l'utente trascina un elemento trascinabile su una destinazione di rilascio, l'evento si attiva.
• dragstart: l'evento viene generato all'inizio di un'operazione di trascinamento.
• gocciolare: l'utente attiva questo evento quando rilascia un elemento su una destinazione di rilascio.

Quando si trascina un file nel browser da un ambiente esterno al browser (ad esempio, il file manager del sistema operativo), il browser non attiva il dragstart O dragend eventi.

TrascinaEvento può tornare utile se desideri inviare un evento di trascinamento personalizzato a livello di codice. Ad esempio, se vuoi a div per attivare eventi di trascinamento personalizzati al caricamento della pagina, ecco come farlo. Per prima cosa, crea una nuova personalizzazione Trascinaevento() come questo:

const customDragStartEvent = new DragEvent('dragstart', {
 dataTransfer: new DataTransfer(),
})
const customDragEndEvent = new DragEvent('dragend');

Nel blocco di codice sopra, customDragStartEvent rappresenta un'istanza di Trascinaevento(). In customDragStartEvent, ci sono due argomenti del costruttore. Il primo rappresenta il tipo di evento di trascinamento, che può essere uno dei sette tipi di evento menzionati in precedenza.

Il secondo argomento è un oggetto con a trasferimento dati chiave che rappresenta un'istanza di Trasferimento dati, di cui imparerai di più più avanti in questa guida. Successivamente, prendi l'elemento da cui desideri attivare l'evento, da Modello oggetto documento (DOM).

const draggableElement = document.querySelector("#draggable");

Quindi aggiungi gli ascoltatori di eventi in questo modo:

 draggableElement.addEventListener('dragstart', (event) => {
console.log('Drag started!');
 event.dataTransfer.setData('text/plain', 'Hello, world!'); 
 });
 draggableElement.addEventListener('dragend', () => {
console.log('Drag ended!');
 });

Nel primo ascoltatore di eventi riportato sopra, la funzione di callback registra il testo "Trascinamento avviato!" e invoca il setData metodo sul trasferimento dati proprietà sul evento oggetto. Ora puoi attivare gli eventi personalizzati in questo modo:

draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

Trasferimento di dati con dataTransfer

IL trasferimento dati L'oggetto funge da ponte tra l'elemento di origine (l'elemento trascinabile) e l'elemento di destinazione (l'area trascinabile) durante un'operazione di trascinamento. Funziona come un contenitore di archiviazione temporaneo per i dati che desideri condividere tra questi elementi.

Questi dati possono assumere varie forme, come testo, URL o tipi di dati personalizzati, rendendolo uno strumento versatile per implementare un'ampia gamma di funzionalità di trascinamento della selezione.

Utilizzo di setData() per pacchetto dati

Per trasferire i dati da un elemento trascinabile a uno trascinabile, utilizzerai il file setData() metodo previsto dal trasferimento dati oggetto. Questo metodo ti consente di comprimere i dati che desideri trasferire e specificare il tipo di dati. Ecco un esempio di base:

element.addEventListener('dragstart', (event) => {
 event.dataTransfer.setData('text/plain', 'Hello, world!');
});

Quando un utente inizia a trascinare l'elemento specificato, setData() confeziona il testo "Hello, world!" con il tipo di dati testo/semplice. Questi dati sono ora associati all'evento di trascinamento e sono accessibili dalla destinazione rilasciabile durante l'operazione di rilascio.

Recupero dei dati con getData()

Sul lato ricevente, all'interno del listener di eventi di un elemento droppable, è possibile recuperare i dati trasferiti utilizzando il file getData() metodo:

element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});

Il blocco di codice sopra recupera i dati con lo stesso tipo di dati (testo/semplice) impostato utilizzando il file setData() metodo precedente. Ciò consente di accedere e manipolare i dati trasferiti secondo necessità nel contesto dell'elemento droppable.

Casi d'uso per interfacce drag and drop

L'integrazione della funzionalità drag-and-drop nelle tue applicazioni web può rappresentare un potente miglioramento, ma è essenziale capire quando e perché dovresti implementarla.

• Caricatori di file: consentire agli utenti di trascinare i file direttamente dal desktop o dal file manager in un'area di rilascio designata semplifica il processo di caricamento.
• Elenchi ordinabili: se la tua applicazione prevede elenchi di elementi, ad esempio elenchi di attività, playlist o gallerie di immagini, gli utenti potrebbero apprezzare la possibilità di riordinare gli elementi tramite trascinamento.
• Dashboard interattive: Per strumenti di visualizzazione e reporting dei dati, il trascinamento della selezione può essere un modo efficace per consentire agli utenti di personalizzare i propri dashboard riorganizzando widget e grafici.

Tenendo presente l'accessibilità

Sebbene il trascinamento della selezione possa essere visivamente accattivante e migliorare l'esperienza dell'utente, è fondamentale garantire che l'implementazione rimanga accessibile a tutti gli utenti, compresi quelli con disabilità. Fornisci metodi alternativi di interazione, come i controlli da tastiera, per rendere la tua applicazione inclusiva.