拖放（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>