标签：
最近花了点时间用纯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; }; ; };
//所谓的面向对象实现（这就是面向对象吗？感觉逻辑上也不咋的呀）
稍后更新....
标签：
原文地址：http://www.cnblogs.com/tisikcci/p/5831828.html
