这篇文章主要介绍如何使用html5实现简单的拖动功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
具体方法如下：
1、对象元素的draggable属性设置为true(draggable="true")。还需要注意的是a元素和img元素必须指定href；
2、编写拖拽有关的事件处理代码：
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实现简单的拖动功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
