vue实现拖拽功能

vue实现拖拽

方法一： 函数封装拖拽脚本

js脚本

export function dragBox (drag, wrap) {
  function getCss (ele, prop) {
    return parseInt(window.getComputedStyle(ele)[prop])
  }
  let initX
  let initY
  let dragable = false
  let wrapLeft = getCss(wrap, 'left')
  let wrapRight = getCss(wrap, 'top')

  drag.addEventListener('mousedown', function (e) {
    dragable = true
    initX = e.clientX
    initY = e.clientY
  }, false)

  document.addEventListener('mousemove', function (e) {
    if (dragable === true) {
      let nowX = e.clientX
      let nowY = e.clientY
      let disX = nowX - initX
      let disY = nowY - initY
      wrap.style.left = wrapLeft + disX + 'px'
      wrap.style.top = wrapRight + disY + 'px'
    }
  })
  drag.addEventListener('mouseup', function (e) {
    dragable = false
    wrapLeft = getCss(wrap, 'left')
    wrapRight = getCss(wrap, 'top')
  }, false)
}

页面使用

<template>
    <div id="boxFindWindow">
        <div
          v-show="show"
          id="findwindow"
        />
     </div>
</template>
<script>
import { dragBox } from '@/utils/common'

    mounted () {
        this.$nextTick(() => {
        dragBox(document.querySelector('#findwindow'), document.querySelector('#boxFindWindow'))
      })
    }
</script>
<style>
    #boxFindWindow{
  position: absolute;
  top: 0px;
  left: 70%;
  cursor: move;
  z-index: 3000;
  #findwindow{
    border-color: #999;
    box-shadow: 0px 2px 3px -1px #333;
  }
}
</style

方法二： 封装vue指令实现拖拽

1.drag.js 拖拽指令的js代码

export default {
  install: Vue => {
    Vue.directive('drag', {
      // 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
      bind: function () { },
      inserted: function (el, binding) {
        let dragable = false
        el.onmousedown = function (e) {
          dragable = true
          const dx = e.clientX - el.offsetLeft
          const dy = e.clientY - el.offsetTop
          el.onmousemove = function (e) {
            if (dragable) {
              e.stopPropagation()
              const left = e.clientX - dx
              const top = e.clientY - dy
              el.style.left = left + 'px'
              el.style.top = top + 'px'
            }
          }
          document.onmouseup = function (e) {
            dragable = false
            e.onmousemove = null
            document.mouseup = null
          }
          return false
        }
      },
      update: function () {
        // b被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
      },
      componentUpdated: function () {
        // 被绑定元素所在模板完成一次更新周期时调用
      },
      unbind: function () {
        // 只调用一次， 指令与元素解绑时调用
      }
    })
  }
}

2.inject.js 自定义组件和方法

import Vue from 'vue'
import drag from '@/plugins/drag'
Vue.use(drag)
export default {
  install (Vue) {
}

3.main.js中 引入自定义组件和方法

// initialize base framework
import Vue from 'vue'
import store from '@/plugins/store'
import inject from '@/plugins/inject'
import router from '@/plugins/router'
import App from './App'
// 注入自定义组件和方法
Vue.use(inject)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})

4.使用

<div v-if='isShowVideo' class="videoStyle" v-drag="greet">
</div>