容器干系事宜如下所示：
我们通过上述的拖放事宜来实现将下图“你好，侠课岛”，拖放到上面的矩形框中的演示效果：
首先创建一个HTML文本，用于测试代码，如下所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5学习(9xkd.com)</title> <style type="text/css"> .div1{ width:200px; height:100px; padding:20px; border:1px solid #000; } p{ font-size: 28px; } </style> </head> <body> <div> <div class="div1" id="div1" ></div> <p id="drag1">你好，侠课岛！然后，我们要给被拖动元素（也便是在上述的 <p> 标签上），设置一个 draggable 属性，此属性用于规定元素是否可拖动，当属性值为 true 时表示元素可拖动，为 false 表示元素不可拖动。
</p> </div> </body> </html>
<p id="drag1" draggable="true">你好，侠课岛！
</p>
只有设置了 draggable 属性值为 true ，指定元素才能被拖动。
然后，我们要做的是点击被拖动元素 “你好，侠课岛！”，点击这个元素时须要触发一个 ondragstart 事宜，ondragstart 事宜会在用户开始拖动元素或选择的文本时触发。调用了一个 drag(event) 函数，在这个函数中规定被拖动的数据，如下所示：
function drag(e){ e.dataTransfer.setData("Text", e.target.id);}
代码中的 dataTransfer.setData() 方法用于设置被拖数据的数据类型和值。参数 Text 表示被拖动数据的数据类型，参数 e.target.id 是可拖动元素的 id。
接着，我们将要 “你好，侠课岛！” 拖动到元素容器范围内（矩形框中）。要实现这个步骤，须要在放置拖动元素的容器上绑定一个 ondragover 事宜，这个事宜用于规定在何处放置被拖动的数据。默认情形下，是无法将一格元素放置到其余一个元素里面的，以是如果须要设置许可放置，则要在 ondragover 事宜中加上 e.preventDefault() 方法来阻挡默认行为。
function allowDrop(e){ e.preventDefault();}末了，便是要放置被拖动元素，也便是要在元素容器范围内松开鼠标。须要在元素容器上绑定一个 ondrop 事宜，如下所示，这个事宜会在拖动过程中开释鼠标键时触发。
<div id="div1" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div><script> function drop(e){ e.preventDefault(); var data = e.dataTransfer.getData("Text"); e.target.appendChild(document.getElementById(data)); }</script>
在 ondrop 事宜中同样须要调用 e.preventDefault() 方法来阻挡默认行为。然后可以通过 dataTransfer.getData("Text"); 方法获取之前的 drag(event) 函数中保存的信息，也便是被拖动元素的 id。接着通过 target.appendChild() 方法为将拖动元素作为元素容器的子元素追加到元素容器中，这样就能成功实现拖放。
完全代码完全代码如下所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5学习(9xkd.com)</title> <style type="text/css"> .div1{ width:200px; height:100px; padding:20px; border:1px solid #000; } p{ font-size: 28px; } </style> </head> <body> <div> <div id="div1" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div> <p id="drag1" draggable="true" ondragstart="drag(event)">你好，侠课岛！总结
</p> </div> <script> function drag(e){ e.dataTransfer.setData("Text", e.target.id); } function allowDrop(e){ e.preventDefault(); } function drop(e){ e.preventDefault(); var data = e.dataTransfer.getData("Text"); e.target.appendChild(document.getElementById(data)); } </script> </body> </html>
当我们要对某个元素实施拖放操作时，首先就需将这个元素的 draggable 属性设置为 true，表示许可元素拖动。个中图片和链接默认是可拖动的，不需设置要 draggable 属性。
链接：https://www.9xkd.com/
