<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> var $ = function(id) { return document.getElementById(id); }; var isIE = Boolean(document.all); var Drag = { container:$("container"), block:$("block"), Init:function(config){ this.container = config.container; this.block = config.block; this.size = config.size; this.block.style.left = "10px"; this.block.style.top = "10px"; this.addListener(this.block,"mousedown",this.bindEvent(this,this.start)); this.om=this.bindEvent(this,this.move), this.ou=this.bindEvent(this,this.stop) }, move:function(e){ window.getSelection?window.getSelection().removeAllRanges() : document.selection.empty();//清除选择 this.block.style.left = (parseInt(this.block.style.left) + parseInt(e.clientX) - this.position.x) + 'px'; this.block.style.top = (parseInt(this.block.style.top) + parseInt(e.clientY) - this.position.y) + 'px'; this.position.x = e.clientX; this.position.y = e.clientY; }, stop:function(){ this.removeListener(document,"mousemove",this.om); this.removeListener(document,"mouseup",this.ou); }, start:function(e){ this.addListener(document,"mousemove",this.om); this.addListener(document,"mouseup",this.ou); this.position.x = parseInt(e.clientX) ; this.position.y = parseInt(e.clientY); }, position:{ x:10, y:10 }, size : { width:0, height:0 }, bindEvent:function(object,func){ return function(event){ func.call(object,event||window.event); }; }, addListener:function(target,eventType,handle){ if(target.addEventListener) { target.addEventListener(eventType,handle,false); } else if(target.attachEvent) { target.attachEvent("on" +eventType,handle); } else { target["on" + eventType] = handle; } }, removeListener:function(target,eventType,handle) { if(target.removeEventListener) { target.removeEventListener(eventType,handle,false); } else if(target.detachEvent) { target.detachEvent("on" + eventType,handle); } else { target["on" + eventType] = null; } } }; window.onload = function(){ Drag.Init({container:$("container"),block:$("block"),size:{width:30,height:30}}); }; </mce:script> <style type="text/css"> #container { height:450px; width:650px; border:5px double red; position:relative; left:0; top:0; } #block { position:absolute; width:30px; height:30px; background-color:#333; left:10px; top:10px; } #test { } </style><style type="text/css" mce_bogus="1"> #container { height:450px; width:650px; border:5px double red; position:relative; left:0; top:0; } #block { position:absolute; width:30px; height:30px; background-color:#333; left:10px; top:10px; } #test { }</style> </head> <body> <div id="container"> <div id="block"></div> </div> <div id="test"></div> </body> </ht
功能先放上来。由于问题还有很多~晚上完善后修改
博客园 © 2004-2025 浙公网安备 33010602011771号 浙ICP备2021040463号-3
浙公网安备 33010602011771号