元素的拖拽效果（鼠标移动加监听事件）

2019-09-01 21:00:23 阅读：397 来源： 互联网

标签：移动鼠标 up eve 拖拽 var obox document 监听

首先创建一个盒子

.box{
            width:100px;height:100px;
            background: red;
            position: absolute;left:0;top:0;
        }

<body>
    <div class="box"></div>
</body>

接下来是js代码部分

<script>
    var obox = document.querySelector(".box");
    var clientW = document.documentElement.clientWidth;
    var clientH = document.documentElement.clientHeight;
    var w = obox.offsetWidth;
    var h = obox.offsetHeight;

    // 行为过程：按下之后，移动，再抬起
    obox.addEventListener("mousedown",function(eve){
        // 获取按下的坐标，在按下的事件对象身上
        var e1 = eve || window.event;
        // 为了防止移动过快，鼠标在某一瞬间离开元素，移动事件加给页面
        document.addEventListener("mousemove",move)
        // 因为移动事件在抬起的时候，被删除，所以提前起名
        function move(eve){
            var e = eve || window.event;
            // 计算元素要移动的真正的距离：为鼠标相对于页面的坐标减去按下时相对于元素的坐标
            var l = e.pageX - e1.offsetX;
            var t = e.pageY - e1.offsetY;
            // 边界限定
            if(t < 0){
                t = 0
            }
            if(l < 0){
                l = 0
            }
            if(l > clientW - w){
                l = clientW - w;
            }
            if(t > clientH - h){
                t = clientH - h;
            }

            // 设置位置
            obox.style.left = l + "px"
            obox.style.top = t + "px"
        }
        // 抬起时，删除移动，删除抬起
        document.addEventListener("mouseup",up)
        function up(){
            document.removeEventListener("mousemove",move)
            document.removeEventListener("mouseup",up)
        }
    })

</script>

标签：移动,鼠标,up,eve,拖拽,var,obox,document,监听
来源： https://blog.csdn.net/weixin_43951248/article/details/100187727

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

元素的拖拽效果（鼠标移动加监听事件）