当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <script>
var leftBox = document.querySelector( '.leftBox' );
var circle = document.querySelector( '.circle' );
var rightBox = document.querySelector( '.rightBox' );
var text = document.querySelector( '.text' );
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);
}
</script>
|
效果:

说明:

关于事件的用法,官方用到了object.addEventListener("dragover", myScript)和event.target.id
更多jQuery、Javascript特效,推荐访问:js特效大全!
以上就是JS如何实现盒子拖拽效果?(附代码)的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
js面向对象编程
js与css的区别是什么
如何使用js控制下拉列表左右选择
js concat什么时候用
介绍js实现五子棋界面设计
如何用js统计字符串中每个字符出现的次数?
javascript怎么读取map的值
js读写cookie
js写后端用什么框架
javascript中number()方法的两种用法
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » JS如何实现盒子拖拽效果?(附代码)