HTML 5 拖放(Drag 和drop)

Posted 2020-06-24 LoveSuk

浏览器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5。

1、把标签 draggable 属性设置为 true。

2、向标签添加ondragstart 属性调用了一个函数drag(event)。

    function drag(ev){

       ev.dataTransfer.setData("Text",ev.target.id);    }  //设置被拖数据的数据类型和值

3、向要拖放的位置(目标元素)标签添加ondragover属性调用一个函数allowDrop(event)。

    function allowDrop(ev){
       ev.preventDefault();} //避免浏览器对数据的默认处理

4、向要拖放的位置(目标元素)标签添加ondrop属性调用一个函数drop(event)。

    当放置被拖数据时，会发生 drop 事件。

    function drop(ev){
       ev.preventDefault(); //避免浏览器对数据的默认处理
       var data=ev.dataTransfer.getData("Text"); //获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
       ev.target.appendChild(document.getElementById(data));  } //把被拖元素追加到目标元素中

5、示例如下：

<script type="text/javascript">
   function allowDrop(ev){
      ev.preventDefault(); }

   function drag(ev){
      ev.dataTransfer.setData("Text",ev.target.id); }

   function drop(ev){
      ev.preventDefault();
      var data=ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data)); }
</script>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="aa.png" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

执行如下：

我们可将图片来回拖放在div1和div2中。