具體方法如下：
1、物件元素的draggable屬性設定為true(draggable="true")。另外要注意的是a元素和img元素必須指定href；
2、寫拖曳有關的事件處理程式碼：
（學習影片分享：html影片教學）
3、案例實作程式碼：
（1）HTML程式碼片段：
（2）CSS程式碼區段：
#tuo{ width: 540px; height: 320px; background: #e54d26; } #cun{ width: 540px; height: 320px; border: 2px solid #d2d2d2; box-shadow: 1px 4px 8px #646464; } img{ width: 500px; height: 280px; }
（3）JavaScript程式碼片段：
function allowDrop(ev){ //不执行默认处理（拒绝被拖放） ev.preventDefault(); }; function drag(ev){ //使用setData(数据类型，携带的数据) //方法将要拖放的数据存入dataTransfer对象 ev.dataTransfer.setData("Text",ev.target.id); }; function drop(ev){ //不执行默认处理（拒绝被拖放） ev.preventDefault(); //使用getData()获取到数据，然后赋值给data var data = ev.dataTransfer.getData("Text"); //使用appendChild方法把拖动的节点放到元素节点中成为其子节点 ev.target.appendChild(document.getElementById(data)); };
4、實作的效果如下：
（1）未拖曳之前：
（2）拖放之後
#相關推薦：html5教學
以上是利用html5實現簡單的拖曳功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
