//参数不写会报错和参数顺序的问题（json和配置/默认参数）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } #div1,#div2,#div3,#div4{ width: 100px; height: 100px; position: absolute; top: 0; cursor: pointer; } #div1{ left: 0; background-color: red; } #div2{ left: 100px; background-color: yellow; } #div3{ left: 200px; background-color: green; } #div4{ left: 300px; background-color: blue; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> <script> window.onload = function(){ var d1 = new Drag(); d1.init({ //配置参数 "id":"div1" }); var d2 = new Drag(); d2.init({ "id":"div2", "fnDown":function(){ document.title = "111"; } }); var d3 = new Drag(); d3.init({ "id":"div3", "fnDown":function(){ document.title = "222"; }, "fnUp":function(){ document.title = "333"; } }); var d4 = new Drag(); d4.init({ "id":"div4", "fnUp":function(){ document.title = "888"; } }); }; function extend(obj1,obj2){ for(var attr in obj2){ obj1[attr] = obj2[attr]; } } function Drag(){ this.oDiv = null; this.disX = 0; this.disY = 0; this.settings = { //默认参数 "fnDown":function(){}, //shit dowm/down "fnUp":function(){} }; } Drag.prototype.init = function(opt){ var This = this; this.oDiv = document.getElementById(opt.id); extend(this.settings,opt); //配置覆盖默认 console.log(this.settings); this.oDiv.onmousedown = function(ev){ var oEvent = ev||event; This.fnDown(oEvent); return false; }; }; Drag.prototype.fnDown = function(ev){ this.settings.fnDown(); //调用默认 this.disX = ev.clientX - this.oDiv.offsetLeft; this.disY = ev.clientY - this.oDiv.offsetTop; var This = this; document.onmousemove = function(ev){ var oEvent = ev||event; This.fnMove(oEvent); }; document.onmouseup = function(){ This.fnUp(); }; }; Drag.prototype.fnMove = function(ev){ var x = ev.clientX - this.disX; var y = ev.clientY - this.disY; this.oDiv.style.left = x + "px"; this.oDiv.style.top = y + "px"; }; Drag.prototype.fnUp = function(){ this.settings.fnUp(); document.onmousemove = document.onmouseup = null; }; </script> </body> </html>