欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

12-盒子在界面拖拽

程序员文章站 2022-06-18 19:34:51
盒子拖拽简述:鼠标可以在界面中选中盒子,并在界面中进行拖拽html部分 Document &...

盒子拖拽

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

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>

运行效果
12-盒子在界面拖拽
12-盒子在界面拖拽

面向对象盒子拖拽

其他部分不发生改变,只有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