具体方法如下：
1、对象元素的draggable属性设置为true(draggable=true)。还需要注意的是a元素和img元素必须指定href；
2、编写拖拽有关的事件处理代码：
（学习视频分享：html视频教程）
3、案例实现代码：
（1）html代码段：
<div id="cun" οndrοp="drop(event)" οndragοver="allowdrop(event)"></div><br /><img src="img/html5.png" id="tuo" draggable="true" οndragstart="drag(event)"/>
（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实现简单的拖动功能的详细内容。