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 Onunload与Onbeforeunload使用小结
Dec 31 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
JS中的三个循环小结
Jun 20 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
理顺8个版本vue的区别(小结)
Sep 17 Javascript
Vuex实现数据增加和删除功能
Nov 11 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
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
基于文本的搜索
2006/10/09 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
详解用vue编写弹出框组件
2017/07/04 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
详解python中字典的循环遍历的两种方式
2017/02/07 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
建筑经济管理专业求职信分享
2014/01/06 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
司法建议书范文
2014/05/13 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
给市场的环保建议书
2014/05/14 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
服务明星事迹材料
2014/12/29 职场文书
导游词之日月潭
2019/11/05 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers