drag拖拽事件

拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。

拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。

 <style type="text/css">
    #div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
    </style>
 <!-- 1.首先设置元素可拖放  draggable='true' -->
  <!-- 2.定义拖动事件及设置拖动数据   (ondragstart属性调用drag函数，规定拖动什么数据；dataTransfer.setData()方法设置被拖动数据) -->
  <!-- 3. 允许放置,阻止默认事件以实现拖放 (数据/元素无法被放置到其他元素中)-->
  <!-- 4.放置(放开被拖数据时发生drop事件, ondrop属性调用一个函数drop(event)) -->


  <div id="div1" ondragover='allowDrop(event)' ondrop='drop(event)' ></div>
  <img id='drag1' src="https://www.w3school.com.cn/i/eg_dragdrop_w3school.gif" alt="" draggable="true" ondragstart="drag(event)" width="336" height="69">

<script>
  function drag(ev) {
    ev.dataTransfer.setData('img',ev.target.id);
  }

  function allowDrop(ev) {
    ev.preventDefault();
  }
  function drop(ev) {
    ev.preventDefault(); //阻止数据的浏览器默认处理方式
    var data=ev.dataTransfer.getData('img');//获取被拖数据(被拖数据是被拖元素的 id(drag1))
    ev.target.appendChild(document.getElementById(data))//将被拖元素追加到放置元素中
  }

</script>

 

在两个 <div> 元素之间来回拖放图像：

<style>
 #div1, #div2
{float:left; width:198px; height:66px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
  </style>

<!-- 实现两个框相互拖放：1.图片设置可拖放及定义拖放事件; 2.用一个div元素包括拖放元素 3.两个div元素都设置两个标签都设置允许拖放及放置事件 -->
  <!-- 1.draggable="true"可拖放 -->
  <!-- 2.ondragstart="drag(event)"定义拖放事件及数据 -->
  <!-- 3.两个标签都设置允许拖放,阻止默认事件 ondragover="allowDrop(event) -->
  <!-- 4.两个标签都设置放置(放开被拖数据时发生drop事件) ondrop="drop(event)"-->


  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="https://www.w3school.com.cn/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
  </div>
  <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

  <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>