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 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 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高级OOP技术演示
2009/08/27 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
删除条目时弹出的确认对话框
2014/06/05 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
Vue发布项目实例讲解
2019/07/17 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
python3中函数参数的四种简单用法
2018/07/09 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
Python创建临时文件和文件夹
2020/08/05 Python
python os.rename实例用法详解
2020/12/06 Python
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
采购内勤岗位职责
2013/12/10 职场文书
趣味活动策划方案
2014/02/08 职场文书
《我的第一本书》教学反思
2014/02/15 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
求职简历自我评价范文
2015/03/10 职场文书
学校通报表扬范文
2015/05/04 职场文书
心术观后感
2015/06/11 职场文书