Html5 drag&drop

下面是一个拖放例子


定义如下的两个div，分别是用于拖放后放置新元素的容器和可拖动的元素；

<body>
    <div id="holder" style="width: 200px; height: 200px; background: #ff4400;" ondrop="drop(event);"
         ondragover="dragover(event);"></div>
    <div id="module" style="width: 100px; height: 100px; background: #f0abcd;" draggable="true"
         ondragstart="dragstart(event);"></div>
</body>

定义Javascript方法，用于处理拖放事件；

  1. <script> function dragstart(evt) { evt.dataTransfer.setData('targetId', evt.target.id); } function drop(evt) { evt.preventDefault(); var data = evt.dataTransfer.getData("targetId"); evt.target.appendChild(document.getElementById(data)); } function dragover(evt) { evt.preventDefault(); } </script>

分析：

  • draggable="true"; // 设置元素可拖动;
  • ondragstart&setData; // 在ondragstart回调方法中调用setData来设置被拖动数据的值，如果不调用setData，则拖动事件不会继续传递下去；
  • ondragover; // 该事件规定在何处旋转被拖动的数据，默认无法将数据/元素旋转到其它元素中，如果要设置成允许旋转，必须阻止对元素的默认处理方式；
  • ondrap; // 当放置被拖放数据时，会触发ondrop回调事件，在ondrop中对拖放进行处理;

Step

  1.    调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
  2.     通过 dataTransfer.getData("targetId") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  3.     被拖数据是被拖元素的 id ("module1")
  4.     把被拖元素追加到放置元素（目标元素）中


浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注：在 Safari 5.1.2 中不支持拖放。

ref: http://www.w3school.com.cn/html5/html_5_draganddrop.asp

posted @ 2017-01-11 13:53  Coder25  阅读(188)  评论(0)  编辑  收藏  举报