Drag&Drop

L’operazione inizia con un evento mousedown seguito da una serie di mousemove. Per rendere un elemento spostabile sono necessarie le seguenti operazioni:

• aggiungere all’elemento l’attributo draggable;
• associare un event listener per l’evento dragstart;

Tutti gli elementi HTML possono avere un attributo draggable:

• true, è trascinabile;
• false, non è trascinabile;
• auto, utilizza il comportamento di default dell’user-agent;

Tutti gli elementi HTML possono rappresentare una dropzone:

• copy, il drop di un elemento risulterà in una copya del draggable;
• move, il drop di un elemento risulterà in una move del draggable;
• link, il drop di un elemento risulterà in un collegamento ai dati originali;
• una keyword di lunghezza >= ad 8 caratteri che inizia con “string:”;
• una keyword di lunghezza >= a 6 caratteri che inizia con “file:”;

I dati che viaggiano nel contesto di una operazione Drag&Drop consistono in una collezione d’informazioni “drag data store”

• un “drag data item kind”;
• un “drag data item type”;
• il dato vero e proprio;
• informazione del feedback di default dello user-agent;
• una lista di uno o più elementi definiti “drag data store elements list”;
• opzionalmente una immagine bitmap e le coordinate di un punto dell’immagine stessa;
• una “drag data store mode”:
  • Read/write;
  • Read-only;
  • Protected;
• “drag data store allowed effects state”

DataTrasfer

interface DataTrasfer { attribute DOMString dropEffect; attribute DOMString effectAllowed;readonly attribute DataTrasferItemList items;void setDragImage(Element image, long x, long y); void addElement(Element element);/* old interface */ readonly attribute DOMStringList types; DOMString getData(DOMString format); void setData(DOMString format, DOMString data); void clearData(optional DOMString format); readonly attribute FileList files; };

Sono utilizzati dagli eventi Drag&Drop, analizziamo in dettaglio:

• dataTransfer.dropEffect[= value], i valori possono essere none, copy, link, move;
• dataTransfer.effectAllowed[ = value], i valori possono essere none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized;
• dataTransfer.items, getter per lista di item;
• dataTrasfer.setDragImage(element, x, y), utilizza element per effettuare un update del drag feedback, rimpiazzando il feedback precedenti;
• dataTransfer.addElement(element), aggiunge element alla lista;
• dataTransfer.types, ritorna un elenco dei formati impostati nell’evento dragstart;
• data = dataTransfer.getData(format),ritorna il dato specificato;
• dataTransfer.setData(format, data), aggiunge i dati specificati;
• dataTransfer.files, ritorna un oggetto FileList contenente i file trascinati;

DataTransferItemList

interface DataTransferItemList { readonly attribute unsigned long lenght; getter DataTrasferItem (unsigned long index); deleter void (unsigned long index); void clear();DataTrasferItem? add(DOMString data, DOMString type); DataTrasferItem? add(File data); };

analizziamo in dettaglio:

• item.lenght,restituisce il numero di item nel drag data store;
• items[index], restituisce l’item specificato la cui posizione è descritta da index;
• delete items[index], rimuove l’item all’interno del drag data store;
• items.clear(), rimuove tutti gli items;
• items.add(data, [type]), aggiunge una nuova entry;

DataTransferItem

interface DataTransferItem { readonly attribute DOMString kind; readonly attribute DOMString type; void getAsString(FunctionStringCallback? callback); File? getAsFile(); };[Callback, NoInterfaceObject] interface FunctionStringCallback { void handleEvent(DOMString data); };

analizziamo nel dettaglio:

• item.kind,getter  per il drag data item kind;
• item.type, getter per il drag data item type;
• item.getAsString(callback),invoca il callback con la stringa come argomento;
• file = item.getAsFile(), ritorna in oggetto file;

DragEvent

[Constructor(DOMString type, optional DragEventInit eventInitDict)] interface DragEvent : MouseEvent { readonly attribute DataTransfer? dataTransfer; };dictionary DragEventInit : MouseEventInit { DataTransfer? dataTransfer; };

dataTransfer è accessibile tramite event.dataTransfer. Ogni evento può essere intercettato e gestito con un listener.