Drag 拖拽

实现可拖拽的任意元素

基本用法

  1. <nut-drag @click.native="click">
  2. <div class="touch-dom">可点击,可拖拽</div>
  3. </nut-drag>
  4. <script>
  5. export default {
  6. methods: {
  7. click() {
  8. this.$toast.text("点击了拖拽元素");
  9. },
  10. },
  11. };
  12. </script>

限制拖拽方向

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

自动吸边

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

限制拖拽边界

  1. <nut-drag
  2. :boundary="{ top: 401, left: 9, bottom: bottom(), right: right() }"
  3. :attract="true"
  4. >
  5. <div class="touch-dom">拖动我</div>
  6. </nut-drag>
  7. <script>
  8. export default {
  9. methods: {
  10. right() {
  11. return document.documentElement.clientWidth - 300 - 9;
  12. },
  13. bottom() {
  14. return document.documentElement.clientHeight - 601;
  15. },
  16. },
  17. };
  18. </script>

Prop

字段说明类型默认值
attract是否开启自动吸边Booleanfalse
direction拖拽元素的拖拽方向限制,x/y/all三选一String‘all’
z-index拖拽元素的堆叠顺序Number, String11
boundary拖拽元素的拖拽边界Object{top: 0,left: 0,right: 0,bottom: 0}

Drag 拖拽 - 图1