（1）HTML代码段：

<div id="cun" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div> <br /> <img src=https://www.ym97.com/"img/html5.png" id="tuo" draggable="true" οndragstart="drag(event)"/>

（2）CSS代码段：

1、对象元素的draggable属性设置为true(draggable="true")。还需要注意的是a元素和img元素必须指定href；

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、实现的效果如下：

#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代码段：

（2）拖放之后

2、编写拖拽有关的事件处理代码：

3、案例实现代码：

（学习视频分享：html视频教程）

具体方法如下：

（1）未拖放之前：