div拖动

最新推荐文章于 2023-11-22 10:44:49 发布

漫天雪_昆仑巅

最新推荐文章于 2023-11-22 10:44:49 发布

阅读量273

点赞数 1

分类专栏： JavaScript 文章标签： div拖动 div移动模块定制模块拖动

本文链接：https://blog.csdn.net/vtopqx/article/details/89067068

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

网上遇到一个div拖动的例子，仅支持拖动不能改变大小，

有需要改变大小可以参考另外一篇文章：https://blog.csdn.net/vtopqx/article/details/89066771

拖动代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS拖拽div/title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
 #dv {
	width:100px;
	height:100px;
	background-color:blue;
	position:absolute;
}

</style>
</head>
<body>
<div id="test">
<div id="dv" class="list">0000</div>
</div>
<script>


//获取元素
var divId = 'dv';
var dv = document.getElementById(divId);
var x = 0;
var y = 0;
var l = 0;
var t = 0;
var isDown = false;
//鼠标按下事件
dv.onmousedown = function(e) {
    //获取x坐标和y坐标
    x = e.clientX;
    y = e.clientY;

    //获取左部和顶部的偏移量
    l = dv.offsetLeft;
    t = dv.offsetTop;
    //开关打开
    isDown = true;
    //设置样式  
    dv.style.cursor = 'move';
}
//鼠标移动
window.onmousemove = function(e) {
    if (isDown == false) {
        return;
    }
    //获取x和y
    var nx = e.clientX;
    var ny = e.clientY;
    //计算移动后的左偏移量和顶部的偏移量
    var nl = nx - (x - l);
    var nt = ny - (y - t);

    dv.style.left = nl + 'px';
    dv.style.top = nt + 'px';
}
//鼠标抬起事件
dv.onmouseup = function() {
    //开关关闭
    isDown = false;
    dv.style.cursor = 'default';
}
</script>

</body>
</html>

漫天雪_昆仑巅

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
div拖动

网上遇到一个div拖动的例子，仅支持拖动不能改变大小，有需要改变大小可以参考另外一篇文章：https://blog.csdn.net/vtopqx/article/details/89066771拖动代码如下：<!doctype html><html><head><meta charset="utf-8"><title&g...
复制链接

扫一扫

专栏目录