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() 方法。

html 5 实现拖放效果

标签：

原文地址：http://www.cnblogs.com/gua-gua/p/4640776.html