javascript 实现拖拽组件

最新推荐文章于 2024-05-11 12:48:45 发布

code_xin~

最新推荐文章于 2024-05-11 12:48:45 发布

阅读量496

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44456354/article/details/111996602

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

js部分

// Function.prototype 实现
 function Drag(dom) {
     this.dom = document.getElementById(dom);
     this.disX = 0;
     this.disY = 0;
 }
 Drag.prototype.init = function () {
     this.bindEvent();
 }
 Drag.prototype.bindEvent = function() {
     this.mouseDown();
     this.mouseUp();
 }
 Drag.prototype.mouseDown = function() {
     var that = this;
     that.dom.onmousedown = function(e) {
         var e = e || window.event;
         console.log(1)
         that.disX = e.clientX - that.dom.offsetLeft;
         that.disY = e.clientY - that.dom.offsetTop;
         that.mouseMove();
     }
 }
 Drag.prototype.mouseMove = function() {
     var that = this;
     document.onmousemove = function(e) {
         var e = e || window.event;
         that.dom.style.left = e.clientX - that.disX + "px";
         that.dom.style.top = e.clientY - that.disY + "px";
     }
 }
 Drag.prototype.mouseUp = function() {
     document.onmouseup = function() {
         document.onmousemove = null;
     }
 }
 var drag = new Drag("box1");    
 // var drag2 = new Drag("box2");
 extend(ChildDrag.prototype,Drag.prototype)
 
 function ChildDrag(dom) {
     Drag.call(this,dom);
 }
 drag.init();
 var childDrag = new ChildDrag("box2");
 childDrag.init();
 // drag2.init(); 
  
 // object 实现
 // var drag = {
 //     init : function(opt) {
 //         this.settings = {
 //             toDown : function() {},
 //             toUp : function() {}
 //         }
 //         extend(this.settings,opt)
 //         this.dom = document.getElementById(this.settings.id);
 //         console.log(this.dom)
 //         this.disX = 0;
 //         this.disY = 0;
         
 //         this.bindEvent();
 //     },
 //     bindEvent : function() {
 //         this.mouseDown();
 //         this.mouseUp();
 //     },
 //     mouseDown : function() {
 //         var that = this;
 //         that.dom.onmousedown = function(e) {
 //             var e = e || window.event;
 //             that.disX = e.clientX - that.dom.offsetLeft;
 //             that.disY = e.clientY - that.dom.offsetTop;
 //             that.mouseMove();
 //             that.settings.toDown();
 //         }

 //     },
 //     mouseMove : function() {
 //         var that = this;
 //         document.onmousemove = function(e) {
 //         that.dom.style.left = e.clientX - that.disX + "px";
 //             that.dom.style.top = e.clientY - that.disY + "px";
 //         }

 //     },
 //     mouseUp : function() {
 //         var that = this;
 //         document.onmouseup = function() {
 //             document.onmousemove = null;
 //             that.settings.toUp();
 //         }
 //     }
 // }
 // drag.init({
 //     id : "box1",
 //     toDown : function() {
 //         document.title = "down"
 //     },
 //     toUp : function() {
 //         document.title = "up"
 //     }
 // });

 function extend(obj1,obj2) {
     for(var prop in obj2) {
         obj1[prop] = obj2[prop];
     }
 }

html、css部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: #d00;
        }
        #box2 {
            position: absolute;
            top: 0;
            left: 200px;
            width: 200px;
            height: 200px;
            background-color: #00d;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

code_xin~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
javascript 实现拖拽组件

js部分// Function.prototype 实现 function Drag(dom) { this.dom = document.getElementById(dom); this.disX = 0; this.disY = 0; } Drag.prototype.init = function () { this.bindEvent(); } Drag.prototype.bindEvent = function() { this.m
复制链接

扫一扫