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 相关文章推荐
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
javascript判断office版本示例
Apr 11 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
微信小程序自动客服功能
Nov 02 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
js实现翻牌小游戏
Jul 31 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
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
Laravel实现表单提交
2017/05/07 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
使javascript也能包含文件
2006/10/26 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
python实现决策树分类
2018/08/30 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
python 录制系统声音的示例
2020/12/21 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
文明礼仪事迹材料
2014/01/09 职场文书
大学旷课检讨书
2014/01/28 职场文书
公证委托书大全
2014/04/04 职场文书
2014年文员工作总结
2014/11/18 职场文书
2014年财政所工作总结
2014/11/22 职场文书