具体方法如下：
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()获取到数据，然后赋值给datavar data = ev.dataTransfer.getData("Text");//使用appendChild方法把拖动的节点放到元素节点中成为其子节点ev.target.appendChild(document.getElementById(data));};
登录后复制
4、实现的效果如下：
（1）未拖放之前：
（2）拖放之后
相关推荐：html5教程
以上就是利用html5实现简单的拖动功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2907794.html
