登 录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>无标题文档</title><br /> <mce:script language="javascript" type="text/javascript"><!--<br /> var currentMoveObj = null; //当前拖动对象<br /> var indexnum=0;<br /> var relLeft; //鼠标按下位置相对对象位置<br /> var relTop;<br /> function f_mdown(obj)<br /> {<br /> //当对象被按下时，记录该对象<br /> indexnum++;<br /> currentMoveObj = obj;<br /> //setCapture()可以让对象捕捉到鼠标事件，跟随着鼠标做出响应<br /> currentMoveObj.setCapture();<br /> //设置对象的定位方式为absolute，便于计算拖动位置<br /> currentMoveObj.style.position = "absolute";<br /> currentMoveObj.style.zIndex=indexnum;<br /> //记录鼠标按下时距离被移动物体的左上角的偏移量<br /> //以便在移动鼠标的时候正确计算位移<br /> relLeft = event.x - currentMoveObj.style.pixelLeft;<br /> relTop = event.y - currentMoveObj.style.pixelTop;<br /> }<br /> window.document.attachEvent('onmouseup',function(){<br /> //releaseCapture()执行和setCapture()相反的操作<br /> currentMoveObj.releaseCapture();<br /> currentMoveObj = null; //当鼠标释放时同时释放拖动对象<br /> });<br /> function f_move(obj)<br /> {<br /> if(currentMoveObj != null)<br /> {<br /> //真正移动鼠标的时候，计算被移动物体的实际位置<br /> currentMoveObj.style.pixelLeft=event.x-relLeft;<br /> currentMoveObj.style.pixelTop=event.y-relTop;<br /> }<br /> }<br /> // --></mce:script><br /> </head><br /> <body><br /> <div id="1234" onMouseDown="f_mdown(this)" onMouseMove="f_move(this)"><br /> <img style="background-color:#cccccc;width:60px;height:60px;"></img>1<br /> </div><br /> <div id="12345" onMouseDown="f_mdown(this)" onMouseMove="f_move(this)"><br /> <img style="background-color:#ccccc;width:60px;height:60px;"></img>2<br /> </div><br /> <div id="12346" onMouseDown="f_mdown(this)" onMouseMove="f_move(this)"><br /> <img style="background-color:#ccccc;width:60px;height:60px;"></img>3<br /> </div><br /> </body><br /> </html><br />
抱歉!评论已关闭.