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.

 

Print Friendly, PDF & Email
Please follow and like us:

Lascia un commento