首页 > 其他分享 >DOM拖拽移动位置封装

DOM拖拽移动位置封装

时间:2023-08-02 09:45:17浏览次数:45  
标签:封装 DOM removeEventListener 拖拽 && changedTouches ref event onMove

 class Drage {
  constructor() {
    this.ref
    this.draggingFlag = false
    this.initX
    this.initY
    this.currentX
    this.currentY
    this.offsetX = 0
    this.offsetY = 0
    this.style = `z-index: 999999;`
  }

  listen(ref, style) {
    this.ref = ref
    if (style) {
      this.style = style
    }

    this.ref && this.ref.setAttribute('draggable', 'true')

    this.ref && this.ref.addEventListener('touchstart', _ => this.onStart(_, this))
    this.ref && this.ref.addEventListener('mousedown', _ => this.onStart(_, this))

    this.ref && this.ref.addEventListener('touchend', _ => this.onEnd(_, this))
    this.ref && this.ref.addEventListener('mouseup', _ => this.onEnd(_, this))
    this.ref && this.ref.addEventListener('mouseout', _ => this.onEnd(_, this))
  }

  onStart(event, _this) {

    if (event.changedTouches && event.changedTouches[0]) {
      _this.initX = event.changedTouches[0].clientX - _this.offsetX
      _this.initY = event.changedTouches[0].clientY - _this.offsetY
    }

    _this.ref && _this.ref.addEventListener('touchmove', _ => _this.onMove(_, _this))
    _this.ref && _this.ref.addEventListener('mousemove', _ => _this.onMove(_, _this))

    _this.draggingFlag = true
  }

  onMove(event, _this) {
    if (_this.draggingFlag) {
      event.preventDefault()
      if (event.changedTouches && event.changedTouches[0]) {
        _this.currentX = event.changedTouches[0].clientX - _this.initX
        _this.currentY = event.changedTouches[0].clientY - _this.initY
        _this.offsetX = _this.currentX
        _this.offsetY = _this.currentY

        if (_this.ref) {
          _this.ref.style = `
            transform: translate(${_this.currentX}px, ${_this.currentY}px);
            ${_this.style}
          `
        }
      }
    }
  }

  onEnd(event, _this) {
    _this.ref && _this.ref.removeEventListener('touchmove', _ => _this.onMove(_, _this))
    _this.ref && _this.ref.removeEventListener('mousemove', _ => _this.onMove(_, _this))
    _this.draggingFlag = false
  }

  removeListen(ref) {
    const _ref = ref ? ref : this.ref
    if (!_ref) return
    _ref.removeEventListener('touchmove', _ => this.onMove(_, this))
    _ref.removeEventListener('mousemove', _ => this.onMove(_, this))
    _ref.removeEventListener('touchstart', _ => this.onStart(_, this))
    _ref.removeEventListener('mousedown', _ => this.onStart(_, this))
    _ref.removeEventListener('touchend', _ => this.onEnd(_, this))
    _ref.removeEventListener('mouseup', _ => this.onEnd(_, this))
    _ref.removeEventListener('mouseout', _ => this.onEnd(_, this))
  }
}

export default new Drage()

初始化拖拽:Drage.listen(this.$refs.dragDom)
删除拖拽:Drage.removeListen()

  

标签:封装,DOM,removeEventListener,拖拽,&&,changedTouches,ref,event,onMove
From: https://www.cnblogs.com/Man-Dream-Necessary/p/17599740.html

相关文章

  • dnsdomainname
    dnsdomainname定义DNS系统中FQDN名称的域名补充说明dnsdomainname命令用于定义DNS系统中FQDN名称中的域名。语法dnsdomainname(选项)选项-v:详细信息模式,输出指令执行的详细信息。实例[root@AY1307311912260196fcZ~]#dnsdomainname-vgethostname()=`AY130731191226......
  • JS中的浏览器对象模型-DOM(二)
    表单在HTML表单中,可以上传文件的唯一控件就是<inputtype="file">。当一个表单包含<inputtype="file">时,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才能正确编码并以multipart/form-data格式发送表单的数据。如下面代码所示一个图片展示元素,一个......
  • 电商API接口对接(商品详情,评论,按图搜图,订单列表)代码封装,可高并发
    淘宝API接口对接需要以下步骤:申请淘宝开放平台账号:在淘宝开放平台(注册账号,并创建自己的应用)选择API接口:根据需要的功能,选择相应的API接口,例如商品API接口、店铺API接口、订单API接口等。获取授权:使用OAuth2.0授权方式,获取用户或店铺的授权,才能够访问和调用API接口。调用API接口:按照......
  • 拖拽 插件
    vue拖拽使用vuedraggable插件实现 第一步:安装vuedraggable插件//npm方式安装npmi-Svuedraggable//或使用yarn安装yarnaddvuedraggable 第二步:在页面引入组件script代码块里<script>//第一步***.引入组件importdraggablefrom'vuedraggable'exportdefault......
  • 分页批量请求数据封装
    关于淘宝接口每次最多取100个,需要分页获取的封装总体思路采取迭代器的方式来多次发送请求. TOPCollection<TOPArticleOrder>orders=session.getArticleOrdersByNick(articleCode,start,end,nick);size=saveOrders(orders.toList()); 最终调用TOPCollection中的toList()......
  • 手动封装call
     目录前言导语代码封装部分验证总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语歌谣歌谣......
  • domainname
    domainname显示和设置系统的NIS域名补充说明domainname命令用于显示和设置系统的NIS域名。语法domainname(选项)(参数)选项-v:详细信息模式;-F:指定读取域名信息的文件。参数NIS域名:指定要设置的NIS域名。实例[root@AY1307311912260196fcZ~]#domainname-vgetdomai......
  • ugui学习 - 自己实现InputField鼠标点击调整光标位置,拖拽修改选中区域
    效果 代码usingUnityEngine;usingUnityEngine.EventSystems;usingUnityEngine.UI;publicclassMyInputField_CaretDragOp:MyInputField_TextSelect,IDragHandler,IPointerDownHandler{publicvoidOnPointerDown(PointerEventDataeventData){......
  • android网络通讯数据封装之 json
    Demo程序包括客户端和服务端客户端按json数据格式封装数据传至服务端。服务端为简单的servlet程序,负责接收客户端传到json数据,然后按原数据返回客户端.实例代码如下:publicstaticStringcmdLogIn(){StringurlString="http://192.168.8.75:89/webroot/jsontest";HttpPo......
  • 20 re/collection/time/random模块
    re模块补充说明importreret=re.findall('a(b)c','abcabcabcabc')#优先显示括号内东西print(ret)#['b','b','b','b']ret=re.findall('a(?:b)c','abcabcabcabc')#?:表示忽视括号print(r......