javascript 实现拖拽组件

程序员文章站 2022-06-24 09:59:58

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...

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>

本文地址：https://blog.csdn.net/weixin_44456354/article/details/111996602

javascript 实现拖拽组件

js部分

html、css部分

Android recyclerview实现拖拽排序和侧滑删除

iOS实现百度地图拖拽后更新位置以及反编码

C# 实现的图片盖章功能，支持拖拽、旋转、放缩、保存

java组件SmartUpload和FileUpload实现文件上传功能

android的RecyclerView实现拖拽排序和侧滑删除示例

iOS实现支持小数的星星评分组件实例代码

Android TouchListener实现拖拽删实例代码

asp.net中使用 Repeater控件拖拽实现排序并同步数据库字段排序

Java实现的可选择及拖拽图片的面板功能【基于swing组件】

Android中RecyclerView实现滑动删除与拖拽功能