自定义元素可拖拽，拖动分离

 

// 普通元素拖拽
Vue.directive('drag', {
  bind: (el, bindings, vnode) => {
    Vue.nextTick(() => {
      // 防止未定义 destroyOnClose 关闭弹窗时dom未被销毁，指令被重复调用
      let modal = el.getElementsByClassName('drag-box')[0]
      let header = el.getElementsByClassName('drag-icon')[0]
      let left = 0
      let top = 0
      let canMove = false
      left = modal.left || 0
      top = modal.top || 0
      // top 初始值为 offsetTop
      top = top || modal.offsetTop
      // 点击title部分拖动
      header.onmousedown = e => {
        console.log("点击")
        canMove = true
        let startX = e.clientX
        let startY = e.clientY
        header.left = header.offsetLeft
        header.top = header.offsetTop
        window.onmousemove = event => {
          if( canMove ){
            console.log("头部鼠标移动", event)
            let endX = event.clientX
            let endY = event.clientY
            modal.left = header.left + (endX - startX) + left
            modal.top = header.top + (endY - startY) + top
            modal.style.left = modal.left + 'px'
            modal.style.top = modal.top + 'px'
          }
        }
        window.onmouseup = event => {
          canMove = false
          left = modal.left
          top = modal.top
          el.onmousemove = null
          el.onmouseup = null
          header.releaseCapture && header.releaseCapture()
        }
        header.setCapture && header.setCapture()
      }
    })
  }
})

 

页面结构

<div class="upload-button" v-if="!recrodTime && recrodTime != 0" v-drag>
   <div class="drag-box">
      <div class="drag-icon">拖拽把柄</div>
      <a-button type="primary" circle icon="plus" class="floatButton" @click="showEventFrom" >录制上报</a-button>
   </div>
</div>

 

 

页面样式

.upload-button{
  position: absolute;
  bottom: 67px;
  right: 150px;
  .time-show-box{
    min-width: 100px;
  }
  .drag-box{
    position: absolute
  }
}