div拖动

网上遇到一个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>
发布了327 篇原创文章 · 获赞 566 · 访问量 263万+

猜你喜欢

转载自blog.csdn.net/vtopqx/article/details/89067068
今日推荐