2021年了，我才知道H5支持元素拖放！！！

直接上例子：图片可以在在两个div中来回拖放

      // CSS
      <style type="text/css">
      #div1, #div2
      {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
      </style>

      // HTML
      <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
	<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
      </div>
      <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

      // JS
      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));
      }

解释

• 拖放元素需要id，必须设置

• 拖放元素添加draggable="true"属性，保证允许拖放

• 拖放元素添加拖动事件ondragstart，ev.dataTransfer.setData设置被拖放元素的数据类型和值（id）

• 拖放元素放置容器需要有两个事件

• ondragover：允许别的元素放进来，因为默认是不允许的

• drop：放置元素触发该事件

1. 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
2. ev.dataTransfer.getData("Text")来获取该元素
3. ev.target.appendChild(document.getElementById(data))被拖放元素追加到容器中

浏览器支持

• 这么好用的方法，IE9以下就别想了

碎碎念

• 愚昧的我以为别人的拖放都是用了很厉害很高大上的插件，原来是H5的方法。哭唧唧。。。。2021年才发现