javascript 公用拖拽类代码

<!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=gb2312" /> 
<title>D类</title> 
<style type="text/css"> 
html, body { 
margin:0; 
} 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A!!window.__defineGetter__%20%26%26%20!%2FMSIE%2F.test(navigator.userAgent)%20%26%26%20function%20()%20%7B%20%0D%0A!window.opera%20%26%26%20window.__defineGetter__('event'%2C%20function%20()%20%7B%20%0D%0A%2F%2F%E5%85%BC%E5%AE%B9Event%E5%AF%B9%E8%B1%A1%20%0D%0Avar%20o%20%3D%20arguments.callee%3B%20%0D%0Ado%20%7B%20%0D%0Aif%20(o.arguments%5B0%5D%20instanceof%20Event)%20return%20o.arguments%5B0%5D%3B%20%0D%0A%7D%20while%20(o%20%3D%20o.caller)%3B%20%0D%0Areturn%20null%3B%20%0D%0A%7D)%3B%20%0D%0A%0D%0Awindow.attachEvent%20%3D%20Document.prototype.attachEvent%20%3D%20Element.prototype.attachEvent%20%3D%20function%20(type%2C%20listener%2C%20capture)%20%7B%20%0D%0A%2F%2F%E5%85%BC%E5%AE%B9attachEvent%E6%96%B9%E6%B3%95%20%0D%0Areturn%20this.addEventListener(new%20String(type).substr(2)%2C%20listener%2C%20capture%20%7C%7C%20false)%3B%20%0D%0A%7D%3B%20%0D%0A%0D%0Awindow.detachEvent%20%3D%20Document.prototype.detachEvent%20%3D%20Element.prototype.detachEvent%20%3D%20function%20(type%2C%20listener%2C%20capture)%20%7B%20%0D%0A%2F%2F%E5%85%BC%E5%AE%B9detachEvent%E6%96%B9%E6%B3%95%20%0D%0Areturn%20this.removeEventListener(new%20String(type).substr(2)%2C%20listener%2C%20capture%20%7C%7C%20false)%3B%20%0D%0A%7D%3B%20%0D%0A%0D%0A%7D()%3B%20%0D%0Avar%20D%20%3D%20%7B%20%0D%0A%2F%2F%E6%8B%BD%E8%A1%A5%E5%8A%A9%E7%B1%BB%20%0D%0Alock%20%3A%20false%20%0D%0A%0D%0A%2C%20dom%20%3A%20function%20()%20%7B%20%0D%0A%2F%2Fdocument%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7%20%0D%0Areturn%20%7B%20%0D%0Aleft%20%3A%20document.documentElement.scrollLeft%20%0D%0A%2C%20top%20%3A%20document.documentElement.scrollTop%20%0D%0A%2C%20width%20%3A%20document.documentElement.clientWidth%20%0D%0A%2C%20height%20%3A%20document.documentElement.clientHeight%20%0D%0A%2C%20body%20%3A%20document.documentElement%20%0D%0A%7D%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2C%20mos%20%3A%20function%20(e)%20%7B%20%0D%0A%2F%2F%E8%8E%B7%E5%8F%96%E9%BC%A0%E6%A0%87%E7%BB%9D%E5%AF%B9%E4%BD%8D%E7%BD%AE%20%0D%0Avar%20dom%20%3D%20this.dom()%3B%20%0D%0A%0D%0Areturn%20%7B%20'x'%20%3A%20dom.left%20%2B%20e.clientX%2C%20'y'%20%3A%20dom.top%20%2B%20e.clientY%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%2C%20pos%20%3A%20function%20(o)%20%7B%20%0D%0A%2F%2F%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%BB%9D%E5%AF%B9%E4%BD%8D%E7%BD%AE%20%0D%0Avar%20x%20%3D%200%2C%20y%20%3D%200%3B%20%0D%0Ado%20%7B%20x%20%2B%3D%20o.offsetLeft%2C%20y%20%2B%3D%20o.offsetTop%3B%20%7D%20while%20(o%20%3D%20o.offsetParent)%3B%20%0D%0Areturn%20%7B%20'x'%20%3A%20x%2C%20'y'%20%3A%20y%20%7D%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2C%20start%20%3A%20function%20(element%2C%20startEventHandler%2C%20moveEventHandler%2C%20stopEventHandler)%20%7B%20%0D%0A%2F%2F%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%A7%8B%20%0D%0Aif%20(this.lock)%20return%3B%20%0D%0Aelse%20this.lock%20%3D%20true%3B%20%2F%2F%E5%85%88%E4%B8%8A%E9%94%81%E5%AE%89%E5%85%A8%E3%80%82%E3%80%82%E3%80%82%3AD%20%0D%0A%0D%0Avar%20pos%20%3D%20this.pos(element)%20%2F%2F%E5%85%83%E7%B4%A0%E4%BD%8D%E7%BD%AE%20%0D%0A%2C%20mos%20%3D%20this.mos(window.event)%20%2F%2F%E9%BC%A0%E6%A0%87%E4%BD%8D%E7%BD%AE%20%0D%0A%2C%20eventHandlers%20%3D%20%7B%20MF%20%3A%20null%2C%20EF%20%3A%20null%20%7D%20%2F%2F%E4%BA%8B%E4%BB%B6%E8%AE%B0%E5%BD%95%20%0D%0A%2C%20property%20%3D%20%7B%20x%20%3A%20mos.x%20-%20pos.x%2C%20y%20%3A%20mos.y%20-%20pos.y%2C%20left%20%3A%20pos.x%2C%20top%20%3A%20pos.y%20%7D%20%2F%2F%E5%B1%9E%E6%80%A7%20%0D%0A%2C%20_MF%20%3D%20this.move(moveEventHandler%2C%20property)%20%2F%2F%E7%A7%BB%E5%8A%A8%E8%BF%87%E7%A8%8B%E4%BA%8B%E4%BB%B6%E9%97%AD%E5%8C%85%20%0D%0A%2C%20_EF%20%3D%20this.stop(element%2C%20stopEventHandler%2C%20eventHandlers)%3B%20%2F%2F%E7%A7%BB%E5%8A%A8%E5%81%9C%E6%AD%A2%E4%BA%8B%E4%BB%B6%E9%97%AD%E5%8C%85%20%0D%0A%0D%0Atry%20%7B%20document.selection%20%26%26%20document.selection.empty%20%26%26%20(document.selection.empty()%2C%201)%20%7C%7C%20window.getSelection%20%26%26%20window.getSelection().removeAllRanges()%3B%20%7D%20catch%20(exp)%20%7B%7D%20%0D%0A%0D%0Adocument.attachEvent('onmousemove'%2C%20_MF)%3B%20%2F%2F%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%8A%A8%20%0D%0Adocument.attachEvent('onmouseup'%2C%20_EF)%3B%20%2F%2F%E9%BC%A0%E6%A0%87%E9%87%8A%E6%94%BE%20%0D%0A%0D%0Aelement.setCapture%20%0D%0A%3F%20(element.setCapture()%2C%20element.attachEvent('onlosecapture'%2C%20_EF))%20%0D%0A%3A%20window.attachEvent('onblur'%2C%20_EF)%3B%20%2F%2F%E9%BC%A0%E6%A0%87%E6%8D%95%E8%8E%B7%E4%B8%A2%E5%A4%B1%E5%88%99%E9%87%8A%E6%94%BE%20%0D%0A%0D%0AeventHandlers.MF%20%3D%20_MF%2C%20eventHandlers.EF%20%3D%20_EF%3B%20%0D%0A%0D%0AstartEventHandler%20%26%26%20startEventHandler(property)%3B%20%2F%2F%E7%9B%B4%E6%8E%A5%E4%BC%A0%E8%BF%87%E5%8E%BB%E3%80%82%E3%80%82%E3%80%82%E8%AF%B7%E8%AF%AF%E6%B1%A1%E6%9F%93-%20-%20%0D%0A%7D%20%0D%0A%0D%0A%2C%20move%20%3A%20function%20(moveEventHandler%2C%20property)%20%7B%20%0D%0A%2F%2F%E7%A7%BB%E5%8A%A8%E4%B8%AD%20%0D%0Avar%20wc%20%3D%20this%3B%20%0D%0A%0D%0Areturn%20function%20(e)%20%7B%20%0D%0Avar%20mos%20%3D%20wc.mos(e%20%7C%7C%20window.event)%2C%20dom%20%3D%20wc.dom()%3B%20%0D%0Awindow.getSelection%20%26%26%20window.getSelection().removeAllRanges()%3B%20%0D%0A%0D%0A%2FMSIE%2F.test(navigator.userAgent)%20%26%26%20function%20()%20%7B%20%0D%0A%2F%2FIE%E6%BB%9A%E5%B1%8F%20%0D%0Aif%20(mos.x%20%3E%20dom.left%20%2B%20dom.width)%20dom.body.scrollLeft%20%3D%20mos.x%20-%20dom.width%3B%20%0D%0Aelse%20if%20(mos.x%20%3C%20dom.left)%20dom.body.scrollLeft%20%3D%20mos.x%3B%20%0D%0A%0D%0Aif%20(mos.y%20%3E%20dom.top%20%2B%20dom.height)%20dom.body.scrollTop%20%3D%20mos.y%20-%20dom.height%3B%20%0D%0Aelse%20if%20(mos.y%20%3C%20dom.top)%20dom.body.scrollTop%20%3D%20mos.y%3B%20%0D%0A%7D()%3B%20%0D%0A%0D%0Aproperty.left%20%3D%20mos.x%20-%20property.x%2C%20property.top%20%3D%20mos.y%20-%20property.y%3B%20%0D%0A%0D%0AmoveEventHandler%20%26%26%20moveEventHandler(property)%3B%20%2F%2F%E7%9B%B4%E6%8E%A5%E4%BC%A0%E8%BF%87%E5%8E%BB%E3%80%82%E3%80%82%E3%80%82%E8%AF%B7%E8%AF%AF%E6%B1%A1%E6%9F%93-%20-%3B%20%0D%0A%7D%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2C%20stop%20%3A%20function%20(element%2C%20stopEventHandler%2C%20eventHandlers)%20%7B%20%0D%0A%2F%2F%E7%A7%BB%E5%8A%A8%E7%BB%93%E6%9D%9F%20%0D%0Avar%20wc%20%3D%20this%3B%20%0D%0Areturn%20function%20(e)%20%7B%20%0D%0Adocument.detachEvent('onmousemove'%2C%20eventHandlers.MF)%3B%20%0D%0Adocument.detachEvent('onmouseup'%2C%20eventHandlers.EF)%3B%20%0D%0Aelement.setCapture%20%0D%0A%3F%20(element.detachEvent('onlosecapture'%2C%20eventHandlers.EF)%2C%20element.releaseCapture())%20%0D%0A%3A%20window.detachEvent('onblur'%2C%20eventHandlers.EF)%3B%20%0D%0Awc.lock%20%3D%20false%3B%20%2F%2F%E4%BA%8B%E4%BB%B6%E9%83%BD%E5%B9%B2%E6%8E%89%E4%BA%86%E5%8F%AF%E4%BB%A5%E6%94%BE%E5%BF%83%E8%A7%A3%E9%94%81%E4%BA%86%20%0D%0AstopEventHandler%20%26%26%20stopEventHandler()%3B%20%0D%0A%7D%3B%20%0D%0A%7D%20%0D%0A%0D%0A%7D%3B%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
<div style="position:relative; width:100px; height:100px; background-color:#000000;"> 
<div style="position:absolute; width:20px; height:20px; line-height:20px; left:50%; top:50%; margin:-10px 0 0 -10px;

background-color:#F00; text-align:center; cursor:move;" 
onmousedown="var wc = this;D.start(wc, null, function (property) { 
var node = wc.parentNode; 
var a = D.pos(node), b = D.pos(wc); 
node.style.left = property.left - b.x + a.x + 'px'; 
node.style.top = property.top - b.y + a.y + 'px'; 
}, null);" 
>拽</div> 
</div>

<div style="width:50px; height:50px; line-height:50px; text-align:center; background-color:#F00; position:absolute;

cursor:move;" 
onmousedown="var wc = this;D.start(wc, null, function (property) { 
wc.style.left = property.left + 'px'; 
wc.style.top = property.top + 'px'; 
}, null);" 
>拽</div> 
<div style="height:1000px;"></div> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程