天天看點

vue制作可拖動的div(超級簡單)

一下方法也是我百度的 但是篩選了好幾個 發現這個最簡單

隻要兩步:

1.在單檔案元件中将這個自定義指令複制進去

2.在需要的div 寫上這個指令即可

// 自定義指令 實作可拖動
  directives: {
    drag(el, bindings) {
      el.onmousedown = function(e) {
        var disx = e.pageX - el.offsetLeft
        var disy = e.pageY - el.offsetTop
        document.onmousemove = function (e) {
          el.style.left = e.pageX - disx + 'px'
          el.style.top = e.pageY - disy + 'px'
        }
        document.onmouseup = function() {
          document.onmousemove = document.onmouseup = null
        }
      }
    }
  }
           
vue制作可拖動的div(超級簡單)

一步到位!點個贊再走呗