您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍如何使用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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。