HTML5 Drag and Drop

HTML5的File API可以支援drag and drop。也可以把檔案從桌面拖拉檔案到網頁上(drag in)、或是反過來把網頁上的東西拖拉到桌面上(drag out)。


(1) 建立一個div，處理drop event

ex.

  var dropZone1 = document.getElementById('drop_zone1');
  dropZone1.addEventListener('drop', handlefileSelect1, false);



(2) 在drop event handler建立FileList object

ex.

function handleFileSelect1(evt) {

 evt.stopPropagation(); // Do not let parent receive this event
 evt.preventDefault(); // Do net use default event behavior
 var files = evt.dataTransfer.files; // FileList object.
}

(3) 設定div的屬性，把draggable設成true和 data-downloadurl。
draggable是為了讓div可以被drag out到桌面;
data-downloadurl是為了div的內容可以實際被download到桌面，所以要設定它的MIME type
格式如下: MIME:fileName:fileURI

ex.

<div id="new_item1" class="item" draggable="true"

 data-downloadurl="audio/mp3:mymusic.mp3:file:///C:/mymusic.mp3">
 </div>


相關連結:

http://www.html5rocks.com/en/tutorials/file/dndfiles/