Drag 拖拽

实现可拖拽的任意元素

基本用法

<nut-drag @click.native="click">
  <div class="touch-dom">可点击，可拖拽</div>
</nut-drag>
<script>
export default {
  methods: {
    click() {
      this.$toast.text("点击了拖拽元素");
    },
  },
};
</script>

限制拖拽方向

<nut-drag direction="x">
  <div class="touch-dom">只能在X轴拖动</div>
</nut-drag>

自动吸边

<nut-drag direction="x" :attract="true">
  <div class="touch-dom">拖动我</div>
</nut-drag>

限制拖拽边界

<nut-drag
  :boundary="{ top: 401, left: 9, bottom: bottom(), right: right() }"
  :attract="true"
>
  <div class="touch-dom">拖动我</div>
</nut-drag>
<script>
export default {
  methods: {
    right() {
      return document.documentElement.clientWidth - 300 - 9;
    },
    bottom() {
      return document.documentElement.clientHeight - 601;
    },
  },
};
</script>

Prop