vue拖动事件案例

<template>
  <div id="app1">
    <div class="wrop">
      <div v-drag class="drag"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      x: null,
      y: null
    };
  },
  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 - disx + 10 + "px";
        };
        document.onmouseup = function() {
          console.log("松开", el.offsetLeft, el.offsetTop);
          document.onmousemove = document.onmouseup = null;
        };
      };
    }
  }
};
</script>
<style lang="scss">
.wrop {
  width: 500px;
  height: 600px;
  border: 1px solid gray;
  position: relative;
  margin: 50px;
  .drag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
  }
}
</style>

来源：CSDN

作者：QQ帝国

链接：https://blog.csdn.net/QQ_Empire/article/details/103756833