12-盒子在界面拖拽_HTML

12-盒子在界面拖拽

盒子拖拽

简述：鼠标可以在界面中选中盒子，并在界面中进行拖拽

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div class="box" class="box"></div>


    </script>
</body>
</html>

css部分

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            position: absolute;
            left: 0;
            top: 0;

        }
    </style>

js部分

<script>
        let box = document.querySelector(".box");

        let divX = 0,
            divY = 0,
            mouseX = 0,
            mouseY = 0,
            disX = 0,
            disY = 0; 

        box.onmousedown = function (e){
            divX = this.offsetLeft;
            divY = this.offsetTop;
            mouseX = e.clientX;
            mouseY = e.clientY;
            box.onmousemove = function(e){
                disX = e.clientX - mouseX;
                disY = e.clientY - mouseY;
                box.style.left = disX + divX + "px";
                box.style.top = disY + divY + "px";
            }
        }

        box.onmouseup = function(e){
            box.onmousemove = null;
        }


    </script>

运行效果
在这里插入图片描述

面向对象盒子拖拽

其他部分不发生改变，只有js发生改变
js部分

<script>

	//这里的this指的是新创建的对象
   function Drag(dragId) {
       this.div = document.getElementById(dragId);
       this.mouseX = null;
       this.mouseY = null;
       this.divX = null;
       this.divY = null;
       this.newMouseX = null;
       this.newMouseY = null;
       this.newDivX = null;
       this.newDivY = null;

       this.init();		//调用函数

   }
   Drag.prototype.init = function(){
       var that = this;
       this.div.onmousedown = function (e) {
           that.mouseX = e.clientX;		//鼠标的x坐标
           that.mouseY = e.clientY;		//鼠标的y坐标
           that.divX = that.div.offsetLeft;		//盒子x坐标
           that.divY = that.div.offsetTop;		//盒子x坐标  that这里指的是全局对象

           that.div.onmousemove = function (e) {
               that.newMouseX = e.clientX;		//鼠标的移动后的x坐标
               that.newMouseY = e.clientY;		//鼠标的移动后的y坐标
			
				//鼠标移动的距离 = 盒子移动的距离   最后需要加上盒子的大小
               that.newDivX = that.newMouseX - that.mouseX + that.divX + "px";
               that.newDivY = that.newMouseY - that.mouseY + that.divY + "px";

               that.move(that.newDivX,that.newDivY);
           }
       }
       this.div.onmouseup = function (e) {
       		//鼠标移开  清空
           that.div.onmousemove = null;
       }
   }

   // move函数只负责移动，不负责计算
   Drag.prototype.move = function (x,y) {
        this.div.style.left = x;
        this.div.style.top = y;
   }
   new Drag("div1");
   new Drag("div2");
</script>

本文地址：https://blog.csdn.net/weixin_45344023/article/details/107881069