JS实现拖拽代码

2015/09/25 52177

    ////html的代码说明：  
    ////定义了一个table，用于测试js拖拽功能  
    <html>  
    <head>  
    <script type="text/javascript" >  
       
    </script>  
    </head>  
    <body>  
    <table width="100px" height="100px"   bgcolor="blue" style='left:120 ;top: 100;position:absolute'>  
    <tr><td>1</td></tr>  
    <tr><td>2</td></tr>  
    <tr><td>3</td></tr>  
    </table>  
    <table width="100px" height="100px"   bgcolor="yellow"  style='left:280 ;top: 100;position:absolute'>  
    <tr><td>1</td></tr>  
    <tr><td>dsa<td></tr>  
    <tr><td>2</td></tr>  
    <tr><td>3</td></tr>  
    </table>  
    <table width="100px" height="100px" bgcolor="green"  style='left:400 ;top: 100;position:absolute'>  
    <tr><td>1</td></tr>  
    <tr><td>2</td></tr>  
    <tr><td>3</td></tr>  
    </table>  
    <table width="100px" height="100px"  bgcolor="gray"  style='left:520 ;top: 100;position:absolute'>  
    <tr><td>1</td></tr>  
    <tr><td>2</td></tr>  
    <tr><td>3</td></tr>  
    </table>  
    <tr>  
    <td>  
    </tr>  
    </table>

    ////js代码说明：  
    ////currentMoveObj ：全局对象，记录当前拖拽的那个对象  
    ////var relLeft;：鼠标按下时的横坐标  
    ////var relTop;鼠标按下时的纵坐标

<script type="text/javascript">  
var currentMoveObj = null;  
var relLeft;  
var relTop;  
   
////summary  
////当按下鼠标时，记录当前点击的坐标，记录当前拖拽的对象  
function mouseDown(obj)  
{  
currentMoveObj =obj;  
currentMoveObj.setCapture();  
currentMoveObj.style.position = "absolute";  
relLeft = event.x - currentMoveObj.style.pixelLeft;  
relTop = event.y - currentMoveObj.style.pixelTop;  
}  
 /////当鼠标松开时，当前拖拽对象置空  
window.document.attachEvent  
('onmouseup',function()  
{  
currentMoveObj.releaseCapture();  
currentMoveObj = null;  
});  
 ////拖拽时，始终更新当前拖拽对象的坐标即可  
function mouseMove()  
{  
if(null != currentMoveObj)  
{  
currentMoveObj.style.pixelLeft = event.x - relLeft;  
currentMoveObj.style.pixelTop = event.y - relTop;  
}  
}  
   
 ////为每一个TABLE对象注册mousedown和mousemove事件  
var elements = document.getElementsByTagName("table");  
window.onload=function () {  
for(var i = 0;i < elements.length;i ++)  
{  
var obj = elements[i];  
attachDragAction(obj);  
}  
};  
   
function attachDragAction(obj) {  
obj.onmousedown= function(){ mouseDown(obj)};  
obj.onmousemove= function(){ mouseMove()};  
}  
</script>

    <p>JS拖拽</p>  
    </body>  
    </html>

代码片段