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的内存泄漏
Mar 04 Javascript
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
一个简易的js图片轮播效果
Jul 22 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
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数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
python后端接收前端回传的文件方法
2019/01/02 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
python中shell执行知识点
2020/05/06 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
职称评定自我鉴定
2014/03/18 职场文书
新年晚会主持词
2014/03/24 职场文书
求职信怎么写
2014/05/23 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2014年教学工作总结
2014/11/13 职场文书
五好家庭申报材料
2014/12/20 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
感恩教育观后感
2015/06/17 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android