div拖动（快速拖动就不好使了，求改）

Posted 2020-09-09 刘小创

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div拖动（快速拖动就不好使了，求改）相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
    background-color: #FF00FF;
    width: 200px;
    height: 100px;
    position: absolute;
    text-align: center;
    left: 0px;
}
</style>
</head>
<body>
    <div id="div" onclick="stopDiv()"></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <input type="button" id="b1" value="滑滑滑" onclick="move()">
    <input type="button" id="b2" value="停停停" onclick="stopDiv()">
</body>
<script type="text/javascript" src="js/TestTimeout.js">
  
  </script>

</html>

TestTimeout.js

/**
 * 实现div拖动的代码
 */
var x = 0;
var flag = 0;

//点击滑滑滑  div滑动
function move() {
    if (flag == 0) {
        moveDiv();
    }
}

//点击停停停  div停下
function stopDiv() {
    clearTimeout(flag);
    flag = 0;
    x = parseInt(document.getElementById("div").style.left.split("px")[0]);
}

//div滑动的实现
function moveDiv() {
    var div = document.getElementById("div");
    x += 2;
    if (x > 1200)
        x = 0;

    div.style.left = x + "px";
    flag = setTimeout("moveDiv()", 10);
}


//下面是div拖动-----------

var div1 = document.getElementById("div");

//拖动div   鼠标按下
div1.onmousedown = function(event) {
    var addx = event.clientX - div1.offsetLeft;
    var addy = event.clientY - div1.offsetTop;
    div1.onmousemove = function(event) {
        div1.style.left = event.clientX - addx + "px";
        div1.style.top = event.clientY - addy + "px";

    }

}
//拖动div    鼠标松开
div1.onmouseup = function() {
    div1.onmousemove = null;
}

---恢复内容结束---

以上是关于div拖动（快速拖动就不好使了，求改）的主要内容，如果未能解决你的问题，请参考以下文章

JavaFX窗口拖动

jQuery可拖动嵌套div并再次拖动

如何实现拖动修改网页中div模块大小

vue 快速给图片添加，点击旋转、放大、缩小、拖动的效果

[可拖动DIV]刚开通博客顺便就写了点东西！

在拖动 jquery 可拖动 div 时显示指南并进行捕捉

div拖动 （快速拖动就不好使了，求改）

div拖动（快速拖动就不好使了，求改）