JS实现拖拽代码
原创
////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> </pre>
////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> </pre>
<p>JS拖拽</p>
</body>
</html> 原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号