<!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" /> <title>无标题文档</title> <mce:script language="javascript" type="text/javascript"><!-- var currentMoveObj = null; //当前拖动对象 var indexnum=0; var relLeft; //鼠标按下位置相对对象位置 var relTop; function f_mdown(obj) { //当对象被按下时,记录该对象 indexnum++; currentMoveObj = obj; //setCapture()可以让对象捕捉到鼠标事件,跟随着鼠标做出响应 currentMoveObj.setCapture(); //设置对象的定位方式为absolute,便于计算拖动位置 currentMoveObj.style.position = "absolute"; currentMoveObj.style.zIndex=indexnum; //记录鼠标按下时距离被移动物体的左上角的偏移量 //以便在移动鼠标的时候正确计算位移 relLeft = event.x - currentMoveObj.style.pixelLeft; relTop = event.y - currentMoveObj.style.pixelTop; } window.document.attachEvent('onmouseup',function(){ //releaseCapture()执行和setCapture()相反的操作 currentMoveObj.releaseCapture(); currentMoveObj = null; //当鼠标释放时同时释放拖动对象 }); function f_move(obj) { if(currentMoveObj != null) { //真正移动鼠标的时候,计算被移动物体的实际位置 currentMoveObj.style.pixelLeft=event.x-relLeft; currentMoveObj.style.pixelTop=event.y-relTop; } } // --></mce:script> </head> <body> <div id="1234" onMouseDown="f_mdown(this)" onMouseMove="f_move(this)"> <img style="background-color:#cccccc;width:60px;height:60px;"></img>1 </div> <div id="12345" onMouseDown="f_mdown(this)" onMouseMove="f_move(this)"> <img style="background-color:#ccccc;width:60px;height:60px;"></img>2 </div> <div id="12346" onMouseDown="f_mdown(this)" onMouseMove="f_move(this)"> <img style="background-color:#ccccc;width:60px;height:60px;"></img>3 </div> </body> </html>