js面向对象方式实现拖拽效果


Posted in Javascript onMarch 03, 2021

本文实例为大家分享了js面向对象方式实现拖拽的具体代码,供大家参考,具体内容如下

拖拽功能的实现原理:(直接拿走!)

<!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>
    #box {
      position: absolute;
      left: 100px;
      top: 100px;
      width: 100px;
      height: 100px;
      background: red;
    }

    #box2 {
      position: absolute;
      left: 200px;
      top: 200px;
      width: 100px;
      height: 100px;
      background: green;
    }
  </style>
</head>

<body>
  <div id="box">文字</div>
  <div id="box2">文字</div>
</body>
<script>
  class Drag {
    startMouse = {};
    startEl = {};
    #el = null;
    constructor(el, option) {
      this.#el = el;
      this.option = option;
      this.start();
    }
    start() {
      let move = (e) => {
        this.move(e)
      }
      this.#el.addEventListener('mousedown', (e) => {
        this.startMouse = {
          x: e.clientX,
          y: e.clientY,
        }
        this.ondragstart && this.ondragstart(e)
        this.startEl = this.getOffset();
        document.addEventListener('mousemove', move);
        document.addEventListener('mouseup', (e) => {
          document.removeEventListener('mousemove', move);
          this.end(e);
        }, {
          once: true
        })
        e.preventDefault();

      })
    }
    move(e) {
      let nowMouse = {
        x: e.clientX,
        y: e.clientY,
      }
      let disMouse = {
        x: nowMouse.x - this.startMouse.x,
        y: nowMouse.y - this.startMouse.y
      }
      this.ondrag && this.ondrag(e)
      this.setOffset(disMouse)
    }
    end(e) {
      this.ondragend && this.ondragend(e)
    }
    getOffset() {
      return {
        x: parseFloat(getComputedStyle(this.#el)["left"]),
        y: parseFloat(getComputedStyle(this.#el)["top"])
      }
    }
    setOffset(dis) {
      this.#el.style.left = this.startEl.x + dis.x + 'px'
      this.#el.style.top = this.startEl.y + dis.y + 'px'
    }
  }
  let box = document.querySelector("#box");
  let box2 = document.querySelector("#box2");
  let d = new Drag(box);
  let d2 = new Drag(box2);
  let clonex = null;
  d2.ondragstart = (e) => {
    clonex = box2.cloneNode(true);
    document.body.appendChild(clonex)
    box2.style.opacity = 0.5
  }
  d2.ondragend = () => {
    document.body.removeChild(clonex);
    box2.style.opacity = 1
  }
</script>

</html>

最终效果(拖动的为绿色块)

js面向对象方式实现拖拽效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
实例详解带参数的 npm script
May 28 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
js实现点击选项置顶动画效果
Aug 25 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
Vue多选列表组件深入详解
Mar 02 #Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 #Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 #Vue.js
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 #Javascript
vue脚手架项目创建步骤详解
Mar 02 #Vue.js
javascript实现简单页面倒计时
Mar 02 #Javascript
javascript实现倒计时提示框
Mar 02 #Javascript
You might like
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
Vue.use源码学习小结
2018/06/20 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
python机器人运动范围问题的解答
2019/04/29 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
总经理任命书范本
2014/06/05 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
交通安全教育心得体会
2016/01/15 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
Python如何加载模型并查看网络
2022/07/15 Python