Drag 拖拽

实现可拖拽的任意元素

基本用法

  1. <nut-drag>
  2.   <div class="touch-dom">可点击，可拖拽</div>
  3. </nut-drag>

限制拖拽方向

  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.  setup() {
  9.     function right() {
  10.       return document.documentElement.clientWidth - 300 - 9;
  11.     }
  12.     function bottom() {
  13.       return document.documentElement.clientHeight - 559;
  14.     }
  15.     return {
  16.       right,
  17.       bottom
  18.     };
  19.   }
  20. </script>

Prop

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

Drag 拖拽 - 图1