首页 > 代码库 > js可以随意拖拽的div的实现
js可以随意拖拽的div的实现
最近花了点时间用纯JS写了一个扫雷程序，写出来效果很差，自己长时间使用面向过程的方式编写代码，写的程序到后面都乱了，有必要找时间好好的深入理解一下OOP了。有时间会把写的东西拿上来。就当是留个纪念吧。打算用OOP重新写个扫雷程序，希望令自己满意。
——————————————碎碎念
记录一个实现随意拖拽div的实现方法，当作备忘吧，指不定什么时候用到了呢。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>divDrag</title> <style> #div1{ width: 300px; height: 300px; background-color: #ccc; /*一定要绝对定位*/ position: absolute; } </style> </head> <body> <div id="div1"></div> <script src="drag.js"></script> </body></html>
*********************************************
//面向过程式写法
window.onload = function(){ var div1 = document.getElementById("div1"); div1.onmousedown = function(ev){ var oevent = ev || event; var distanceX = oevent.clientX - div1.offsetLeft; var distanceY = oevent.clientY - div1.offsetTop; document.onmousemove = function(ev){ var oevent = ev || event; div1.style.left = oevent.clientX - distanceX + ‘px‘; div1.style.top = oevent.clientY - distanceY + ‘px‘; }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; }; ;};
//所谓的面向对象实现（这就是面向对象吗？感觉逻辑上也不咋的呀）
稍后更新....
js可以随意拖拽的div的实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。