【VUE】拖拽自定义指令 | 越努力越快乐

main.js添加

Source Code

Vue.directive('drag', {
  bind (el) {
    var oDiv = el
    oDiv.onmousedown = function (ev) {
      var disX = ev.clientX - oDiv.offsetLeft
      var disY = ev.clientY - oDiv.offsetTop
      ev.preventDefault()
      document.onmousemove = function (ev) {
        var l = ev.clientX - disX
        var t = ev.clientY - disY
        oDiv.style.left = l + 'px'
        oDiv.style.top = t + 'px'
      }
      document.onmouseup = function () {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

使用

Source Code

<div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', right:0, top:0}"></div>

本文作者为gengboxb，转载请注明。