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/

走路

如果要走路到某個地方，怎樣才會好走呢?

或許可以改造路，把整條路都弄平，然後鋪上軟地毯，走起來就會非常舒適。

 但這是不可能，也不需要的。因為花費的工程太大，而路又不只一條，假如明天要換目的地，那這條路就白做了。

 比較好的方式，是選擇改造自己腳，穿上舒適的皮鞋，這樣不管走哪條路，都一樣輕鬆。

 每個人都想要前往康莊大道，走向一段不平凡的路程，到達不平凡的終點。

 人生，又何嘗不是一條未知的道路呢？