Programmazione.it :: Drag and drop dal browser al desktop

Drag and drop dal browser al desktop

Scritto da Cosmos Puglisi il 03-09-2010 ore 07:36

Già in un'altra occasione abbiamo parlato della novità introdotta da Gmail con l'arrivo di HTML5: il drag and drop degli allegati. Lo sviluppatore Ryan Seddon, alla disperata ricerca di ottenere lo stesso effetto, riesce a implementare questa feature per Google Chrome, come spiega nel suo blog. Per vedere di cosa si tratta, si può provare la demo.

Il codice sta tutto qui:

var file = document.getElementById("dragout");
 
file.addEventListener("dragstart",function(evt){
    evt.dataTransfer.setData("DownloadURL",fileDetails);
},false);

associato al link HTML seguente:

<a href="Eadui.ttf" id="dragout" draggable="true" data-downloadurl="
    application/octet-stream
    :Eadui.ttf
    :http://thecssninja.com/gmail_dragout/Eadui.ttf">Font file</a>

Vediamo come lo sviluppatore, per ricreare questa particolare feature, utilizzi l'evento ondragstart e un attributo custom previsto con HTML 5, creato con il prefisso data-: data-downloadurl che sta a indicare il file da scaricare.

Certo, il passaggio in questo caso è solo unidirezionale, ovvero dalla pagina web al desktop, mentre su Gmail funziona da desktop a Web. Ciononostante tale esempio rimane sicuramente un buon inizio per eguagliare (o quasi) le funzionalità del browser a quelle desktop.