js如何实现盒子拖拽效果？本篇文章给大家详细介绍js实现盒子拖拽效果的方法，文中示例代码介绍的非常详细。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
html代码:
nbsp;html>拖拽
登录后复制
css代码:
.leftBox { display: inline-block; width: 100px; height: 100px; border: 1px solid black; border-radius: 10px; position: relative; } .rightBox { display: inline-block; width: 100px; height: 100px; border: 1px solid black; border-radius: 10px; position: relative; } .circle { width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(25px at center, white, skyblue); /* 绝对居中 */ position: absolute; left: 50%; margin-left: -25px; top: 50%; margin-top: -25px; }
登录后复制
js代码:
//获取dom元素,分别是左盒子 圆圈 右盒子 var leftBox = document.querySelector('.leftBox'); var circle = document.querySelector('.circle'); var rightBox = document.querySelector('.rightBox'); var text = document.querySelector('.text'); //移动circle circle. //开启左盒子的移入事件 leftBox.ondragover = function (event) { event.preventDefault(); } leftBox.ondrop = function () { leftBox.appendChild(circle); } //开启右盒子的移入事件 rightBox.ondragover = function (event) { event.preventDefault(); } rightBox.ondrop = function () { rightBox.appendChild(circle); }
登录后复制
效果:
说明：
关于事件的用法,官方用到了object.addEventListener(“dragover”, myScript)和event.target.id
更多jQuery、Javascript特效，推荐访问：js特效大全！
以上就是JS如何实现盒子拖拽效果？（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2727919.html
