div实现拖拽

最新推荐文章于 2023-11-30 08:39:27 发布

fan_gangliang

最新推荐文章于 2023-11-30 08:39:27 发布

阅读量628

点赞数

分类专栏：随手笔记文章标签： div

本文链接：https://blog.csdn.net/fan_gangliang/article/details/8737144

版权

随手笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

// 拖拽
// 对“拖动点”定义：onMousedown="StartDrag(this)" onMouseup="StopDrag(this)"
// onMousemove="Drag(this)"即可
var move = false, _X, _Y;
function StartDrag(obj) { // 定义准备拖拽的函数
obj.setCapture(); // 对当前对象的鼠标动作进行跟踪
move = true;
// 获取鼠标相对内容层坐标
var parentwin = document.getElementById("showDiv"); //此处必须指定你所拖拽的div的id
_X = parentwin.offsetLeft - event.clientX;
_Y = parentwin.offsetTop - event.clientY;
}
function Drag(obj) { // 定义拖拽函数
if (move) {
  var parentwin = document.getElementById("showDiv"); //此处必须指定你所拖拽的div的id
  parentwin.style.left = event.clientX + _X;
  parentwin.style.top = event.clientY + _Y;
}
}
function StopDrag(obj) { // 定义停止拖拽函数
obj.releaseCapture(); // 停止对当前对象的鼠标跟踪
move = false;
}