html 5 實現拖放效果

在html5中要實現拖放操做，相對於之前經過鼠標操做實現，要簡單得多，數據安全性也更有保障。只須要如下幾步便可。

1. 給被拖拽元素添加draggable屬性，若是是文件拖放。
2. 在拖拽元素的dragstart中初始化相關的數據信息，主要是DataTransfer對象。
3. 在目標元素的dragover事件中，取消其默認操做。
4. 在目標元素的drop事件中，處理接受到的數據。
5. 在被拖拽元素的dragend事件中，作善後工做。若沒有則能夠省略。

大體代碼以下：

<div id="source" draggable="draggable">source</div>
<div id="target">target</div>
<script type="text/javascript">
var target = document.getElementById('target');
var source = document.getElementById('source');
source.ondragstart = function(e){
  e.dataTransfer.effectAllowed = 'copyMove';
  e.dataTransfer.setData('test', 'testData');
};
target.ondragover = function(e){
  e.dataTransfer.dropEffect = 'move';
  e.preventDefault(); // 不能少
};
target.ondrop = function(e){
  var elem = document.createElement('a');
  elem.innerHTML = e.dataTransfer.getData('test');
  e.target.appendChild(elem);
};
</script>

draggable屬性

draggable是一個枚舉屬性，用於指定一個標籤是否能夠被拖拽。有如下四種取值：

1. true：表示此元素可拖拽。
2. false：表示此元素不可拖拽。
3. auto：除img和帶href的標籤a標籤表示可拖拽外，其它標籤均表示不可拖拽。
4. 其它任何值：表示不可拖拽。

拖動什麼 - ondragstart 和 setData()

ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。

dataTransfer.setData() 方法設置被拖數據的數據類型和值。

放到何處 - ondragover

ondragover 事件規定在何處放置被拖動的數據。

默認地，沒法將數據/元素放置到其餘元素中。若是須要設置容許放置，咱們必須阻止對元素的默認處理方式。

這要經過調用 ondragover 事件的 event.preventDefault() 方法。