AjaxUI：鼠标拖拽

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<meta content-type="text/html" charset="gb2312"/> 
<style type="text/css"> 
body{padding:0px;text-align:center;font:12px Arial;} 
div.container{width:100px;height:100px;border:1px solid #000;margin:10px auto;} 
div#main{width:99px;height:99px;border:1px solid #000;background:#050;color:#fff;font:12px Arial;margin:auto;} 
p{text-algin:left;} 
</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%0D%0A%2F********************Mouse%E7%B1%BB%E5%8F%8A%E5%85%B6%E6%96%B9%E6%B3%95********************%2F%20%0D%0A%2F%2F%E5%88%9B%E5%BB%BA%E9%BC%A0%E6%A0%87%E7%B1%BB%20%0D%0Avar%20Mouse%3Dnew%20Object()%3B%20%0D%0A%0D%0A%2F%2F%E8%8E%B7%E5%8F%96%E9%BC%A0%E6%A0%87%E4%BD%8D%E7%BD%AE%20%0D%0AMouse.getMousePosition%3Dfunction(event)%20%0D%0A%20%7B%20%0D%0A%20%20%20%20var%20event%3Devent%20%7C%7C%20window.event%3B%20%0D%0A%20%20%20%20if(event.pageX)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20return%20%7Bx%3Aevent.pageX%2Cy%3Aevent.pageY%7D%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20else%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20x%3Devent.clientX%2Bdocument.body.scrollLeft-document.body.clientLeft%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20y%3Devent.clientY%2Bdocument.body.scrollTop-document.body.clientTop%3B%20%0D%0A%20%20%20%20%20%20%20%20return%20%7Bx%3Ax%2Cy%3Ay%7D%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E9%BC%A0%E6%A0%87%E6%98%AF%E5%90%A6%E6%8C%89%E4%B8%8B%20%0D%0AMouse.isDown%3Dfalse%3B%20%0D%0A%0D%0A%2F*************************Element%E7%B1%BB%E5%8F%8A%E5%85%B6%E6%96%B9%E6%B3%95***********************%2F%20%0D%0Avar%20Element%3Dnew%20Object()%3B%20%0D%0A%0D%0A%2F%2F%E6%A0%B9%E6%8D%AEid%E8%8E%B7%E5%8F%96%E7%9B%AE%E6%A0%87%20%0D%0AElement.getElement%3Dfunction(id)%20%0D%0A%7B%20%0D%0A%20%20%20%20var%20obj%3Ddocument.getElementById(id)%3B%20%0D%0A%20%20%20%20if(obj)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20return%20obj%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20else%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20alert(%22getElement()%3Ano%20such%20Element%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20return%20null%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E8%87%AA%E8%BA%AB%E7%9A%84%E5%B0%BA%E5%AF%B8%20%0D%0AElement.getElementSize%3Dfunction(object)%20%0D%0A%7B%20%0D%0A%20%20%20%20try%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20return%20%7Bwidth%3Aobject.offsetWidth%2Cheight%3Aobject.offsetHeight%7D%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20catch%20(error)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20alert(%22getElementSize()%3AElement%20is%20undefined%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20return%20null%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%9A%84%E4%BD%8D%E7%BD%AE%20%0D%0AElement.getElementPosition%3Dfunction(object)%20%0D%0A%7B%20%0D%0A%20%20%20%20try%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20left%3D0%2Ctop%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%20while(object.offsetParent)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20left%2B%3Dobject.offsetLeft%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20top%2B%3Dobject.offsetTop%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20object%3Dobject.offsetParent%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20%7Bleft%3Aleft%2Ctop%3Atop%7D%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20catch%20(error)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20alert(%22getEelementPosition()%3AElement%20is%20undefined%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20return%20null%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%9A%84%E7%88%B6%E8%8A%82%E7%82%B9%20%0D%0AElement.getElementParentNode%3Dfunction(obj)%20%0D%0A%7B%20%0D%0A%20%20%20%20try%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20return%20obj.parentNode%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20catch%20(error)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20alert(%22getElementParentNode()%3AElement%20is%20undefined%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20return%20null%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%2F***********************%E5%8A%9F%E8%83%BD%E5%87%BD%E6%95%B0**************************%2F%20%0D%0A%0D%0A%2F%2F%E7%A7%BB%E5%8A%A8%E5%87%BD%E6%95%B0%20%0D%0A%2F%2F%E7%A7%BB%E5%8A%A8%E5%8F%AF%E6%8B%96%E5%8A%A8%E5%85%83%E7%B4%A0%EF%BC%8C%E5%B9%B6%E4%B8%94%E5%9C%A8%E5%85%B6%E6%8E%A5%E8%BF%91%E7%9B%AE%E6%A0%87%E5%85%83%E7%B4%A0%E6%97%B6%E4%BD%BF%E7%9B%AE%E6%A0%87%E5%85%83%E7%B4%A0%E7%9A%84%E8%BE%B9%E6%A1%86%E7%8E%B0%E5%AE%9E%E4%B8%BA%E7%BA%A2%E8%89%B2%E3%80%82%20%0D%0Afunction%20move(event%2CdragObj%2CtargetElementAry)%20%0D%0A%7B%20%0D%0A%20%20%20%20var%20event%3Devent%20%7C%7C%20window.event%3B%20%0D%0A%20%20%20%20var%20obj%3DdragObj%3B%20%0D%0A%20%20%20%20if(Mouse.isDown)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%E8%AE%A1%E7%AE%97%E5%8F%AF%E6%8B%96%E5%8A%A8%E5%85%83%E7%B4%A0%E7%9A%84x%2Cy%E5%9D%90%E6%A0%87.%20%0D%0A%20%20%20%20%20%20%20%20var%20left%3DMouse.getMousePosition(event).x-parseInt(obj.getAttribute(%22difX%22))%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20top%3DMouse.getMousePosition(event).y-parseInt(obj.getAttribute(%22difY%22))%3B%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%2F%2F%E5%88%A4%E6%96%AD%E5%8F%AF%E6%8B%96%E5%8A%A8%E5%85%83%E7%B4%A0%E7%9A%84x%2Cy%E5%9D%90%E6%A0%87%E4%B8%8E%E7%9B%AE%E6%A0%87%E5%85%83%E7%B4%A0%E5%9D%90%E6%A0%87%E6%98%AF%E5%90%A6%E6%8E%A5%E8%BF%91%20%0D%0A%20%20%20%20%20%20%20%20for(i%3D0%3Bi%3CtargetElementAry.length%3Bi%2B%2B)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20targetLeft%3DElement.getElementPosition(targetElementAry%5Bi%5D).left%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20targetTop%3DElement.getElementPosition(targetElementAry%5Bi%5D).top%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(Math.abs(left-targetLeft)%3C30%26%26Math.abs(top-targetTop)%3C30)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20targetElementAry%5Bi%5D.style.borderColor%3D%22%23f00%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20targetElementAry%5Bi%5D.style.borderColor%3D%22%23000%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%0D%0A%20%20%20%20%20%20%20%20%2F%2F%E8%AE%BE%E7%BD%AE%E5%8F%AF%E6%8B%96%E5%8A%A8%E5%85%83%E7%B4%A0%E7%9A%84x%2Cy%E4%BD%8D%E7%BD%AE.%20%0D%0A%20%20%20%20%20%20%20%20obj.style.top%3Dtop%2B%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20obj.style.left%3Dleft%2B%22px%22%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E7%A7%BB%E5%8A%A8%E5%87%BD%E6%95%B0%20%0D%0A%2F%2F%E7%A7%BB%E5%8A%A8%E5%89%8D%E7%9A%84%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C%20%0D%0A%2F%2F%E8%AE%A1%E7%AE%97%E5%81%8F%E5%B7%AE%2Cclone%E5%8F%AF%E6%8B%96%E5%8A%A8%E5%85%83%E7%B4%A0%E5%B9%B6%E5%B0%86%E5%85%B6%E9%9A%90%E8%97%8F%20%0D%0A%2F%2F%E8%AE%BE%E7%BD%AE%E4%B8%80%E4%BA%9B%E5%8F%82%E6%95%B0%20%0D%0Afunction%20startDrag(event%2CdragObj%2CtargetElementAry)%20%0D%0A%7B%20%0D%0A%20%20%20%20var%20event%3Devent%20%7C%7C%20window.event%3B%20%0D%0A%20%20%20%20var%20obj%3Devent.target%20%7C%7C%20event.srcElement%3B%20%0D%0A%20%20%20%20var%20%20%20%20left%3DElement.getElementPosition(obj).left%3B%20%0D%0A%20%20%20%20var%20%20%20%20top%3DElement.getElementPosition(obj).top%3B%20%0D%0A%0D%0A%20%20%20%20%2F%2F%E8%AE%A1%E7%AE%97%E5%81%8F%E5%B7%AE%20%0D%0A%20%20%20%20var%20%20%20%20difX%3DMouse.getMousePosition(event).x-left%3B%20%0D%0A%20%20%20%20var%20%20%20%20difY%3DMouse.getMousePosition(event).y-top%3B%20%0D%0A%0D%0A%20%20%20%20%2F%2Fclone%E8%8A%82%E7%82%B9%20%0D%0A%20%20%20%20dragObj.appendChild(obj.cloneNode(true))%3B%20%0D%0A%0D%0A%20%20%20%20%2F%2F%E8%AE%BE%E7%BD%AE%E9%80%8F%E6%98%8E%E5%BA%A6%20%0D%0A%20%20%20%20dragObj.childNodes%5B0%5D.style.filter%3D%22alpha(opacity%3D50)%22%3B%20%0D%0A%20%20%20%20dragObj.childNodes%5B0%5D.style.opacity%3D0.5%3B%20%0D%0A%0D%0A%20%20%20%20dragObj.style.left%3Dleft%2B%22px%22%3B%20%0D%0A%20%20%20%20dragObj.style.top%3Dtop%2B%22px%22%3B%20%0D%0A%20%20%20%20dragObj.style.display%3D%22block%22%3B%20%0D%0A%0D%0A%20%20%20%20%2F%2F%E8%AE%BE%E7%BD%AE%E5%8F%82%E6%95%B0%20%0D%0A%20%20%20%20dragObj.setAttribute(%22difX%22%2CdifX)%3B%20%2F%2F%E5%81%8F%E5%B7%AE%20%0D%0A%20%20%20%20dragObj.setAttribute(%22difY%22%2CdifY)%3B%20%20%0D%0A%20%20%20%20dragObj.setAttribute(%22originTop%22%2Ctop)%3B%20%2F%2F%E5%8E%9F%E5%A7%8B%E7%9B%AE%E6%A0%87y%E5%9D%90%E6%A0%87%20%0D%0A%20%20%20%20dragObj.setAttribute(%22originLeft%22%2Cleft)%3B%20%2F%2F%E5%8E%9F%E5%A7%8B%E7%9B%AE%E6%A0%87x%E5%9D%90%E6%A0%87%20%0D%0A%20%20%20%20dragObj.setAttribute(%22originObj%22%2Cobj.id)%3B%20%2F%2F%E5%8E%9F%E5%A7%8B%E7%9B%AE%E6%A0%87id%20%0D%0A%0D%0A%20%20%20%20obj.style.display%3D%22none%22%3B%20%0D%0A%0D%0A%20%20%20%20%2F%2F%E6%A0%87%E8%AE%B0%E9%BC%A0%E6%A0%87%E4%B8%BA%E6%8C%89%E4%B8%8B%20%0D%0A%20%20%20%20Mouse.isDown%3Dtrue%3B%20%0D%0A%0D%0A%20%20%20%20%2F%2F%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%8A%A8%E5%93%8D%E5%BA%94%20%0D%0A%20%20%20%20document.onmousemove%3Dfunction(e)%7Bmove(e%2CdragObj%2CtargetElementAry)%3B%7D%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0%20%0D%0A%2F%2F%E7%A7%BB%E9%99%A4%E6%8C%87%E5%AE%9A%E8%8A%82%E7%82%B9%E7%9A%84%E6%89%80%E6%9C%89%E5%AD%90%E8%8A%82%E7%82%B9%20%0D%0Afunction%20removeNodeChild(obj)%20%0D%0A%7B%20%0D%0A%20%20%20%20for(j%3Dobj.childNodes.length-1%3Bj%3E%3D0%3Bj--)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20obj.removeChild(obj.childNodes%5Bj%5D)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E5%88%9D%E5%A7%8B%E5%8C%96%20%0D%0Afunction%20init()%20%0D%0A%7B%20%0D%0A%20%20%20%20%2F%2F%E5%88%9B%E5%BB%BA%E9%9A%90%E8%97%8F%E7%9A%84%E6%8B%96%E5%8A%A8%E5%B1%82%20%0D%0A%20%20%20%20var%20dragObj%3Ddocument.createElement(%22div%22)%3B%20%0D%0A%20%20%20%20dragObj.setAttribute(%22id%22%2C%22dragDiv%22)%3B%20%0D%0A%20%20%20%20dragObj.style.cssText%3D%22position%3Aabsolute%3Btop%3A0px%3Bleft%3A0px%3Bdisplay%3Anone%3B%22%3B%20%0D%0A%20%20%20%20document.body.appendChild(dragObj)%3B%20%0D%0A%0D%0A%20%20%20%20%2F%2F%E5%88%9B%E5%BB%BA%E7%9B%AE%E6%A0%87%E6%95%B0%E7%BB%84%20%0D%0A%20%20%20%20var%20targetElementAry%3Dnew%20Array(Element.getElement(%22one%22)%2CElement.getElement(%22two%22)%2CElement.getElement(%22three%22)%2CElement.getElement(%22four%22))%3B%20%0D%0A%0D%0A%20%20%20%20%2F%2F%E6%B7%BB%E5%8A%A0%E4%BA%8B%E4%BB%B6%20%0D%0A%20%20%20%20document.onmousedown%3Dfunction(event)%20%0D%0A%20%20%20%20%7B%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20var%20event%3Devent%20%7C%7C%20window.event%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20obj%3Devent.target%20%7C%7C%20event.srcElement%3B%20%0D%0A%20%20%20%20%20%20%20%20if(obj.id%3D%3D%22main%22)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20startDrag(event%2CdragObj%2CtargetElementAry)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%0D%0A%0D%0A%20%20%20%20%2F%2F%E6%B7%BB%E5%8A%A0%E4%BA%8B%E4%BB%B6%20%0D%0A%20%20%20%20%2F%2F%E6%A3%80%E6%9F%A5%E5%8F%AF%E7%A7%BB%E5%8A%A8%E5%85%83%E7%B4%A0%E7%9A%84%E4%BD%8D%E7%BD%AE%E5%92%8C%E7%9B%AE%E6%A0%87%E5%85%83%E7%B4%A0%E7%9A%84%E4%BD%8D%E7%BD%AE%E6%98%AF%E5%90%A6%E6%8E%A5%E8%BF%91%20%0D%0A%20%20%20%20%2F%2F%E6%98%AF%EF%BC%8C%E5%88%99%E5%B0%86%E5%85%B6%E7%A7%BB%E5%8A%A8%E5%88%B0%E7%9B%AE%E6%A0%87%20%0D%0A%20%20%20%20%2F%2F%E5%90%A6%EF%BC%8C%E5%B0%86%E5%85%B6%E7%A7%BB%E5%8A%A8%E5%88%B0%E5%8E%9F%E5%A7%8B%E4%BD%8D%E7%BD%AE%20%0D%0A%20%20%20%20document.onmouseup%3Dfunction()%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20Mouse.isDown%3Dfalse%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20left%3DparseInt(dragObj.style.left)%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20top%3DparseInt(dragObj.style.top)%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20index%3D-1%3B%20%0D%0A%20%20%20%20%20%20%20%20for(i%3D0%3Bi%3CtargetElementAry.length%3Bi%2B%2B)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20targetLeft%3DElement.getElementPosition(targetElementAry%5Bi%5D).left%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20targetTop%3DElement.getElementPosition(targetElementAry%5Bi%5D).top%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(Math.abs(left-targetLeft)%3C30%26%26Math.abs(top-targetTop)%3C30)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20index%3Di%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20if(index%3E-1)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20id%3DdragObj.getAttribute(%22originObj%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20removeNodeChild(dragObj)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dragObj.style.display%3D%22none%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20obj%3DElement.getElement(id)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20node%3Dobj.cloneNode(true)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20parent%3DElement.getElementParentNode(obj)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20removeNodeChild(parent)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20targetElementAry%5Bindex%5D.appendChild(node)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20targetElementAry%5Bindex%5D.childNodes%5B0%5D.style.display%3D%22block%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20id%3DdragObj.getAttribute(%22originObj%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dragObj.style.left%3DdragObj.getAttribute(%22originLeft%22)%2B%22px%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dragObj.style.top%3DdragObj.getAttribute(%22originTop%22)%2B%22px%22%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20removeNodeChild(dragObj)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dragObj.style.display%3D%22none%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(id)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Element.getElement(id).style.display%3D%22block%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%20%20%20%20%0D%0A%7D%20%0D%0A%0D%0Awindow.onload%3Dinit%3B%20%0D%0A%3C%2Fscript%3E"> 
</HEAD> 
<BODY> 
<div id="one" class="container"></div> 
<div id="two" class="container"></div> 
<div id="three" class="container"></div> 
<div id="four"  class="container"></div> 
<div><div id="main">drag me</div></div> 
<p>在绿色方块上按下鼠标，可以将其拖动，在方块的位置靠近某个方框并且方框的边线显示红色时，放开鼠标，方块会自动进入方框，其它位置放开鼠标，方块会返回上一次的位置。</p> 
</BODY> 
</HTML>

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

教程首页更多教程