Drag 拖拽请使用手机扫码体验

实现可拖拽的任意元素

基本用法

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

自动吸边

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

限制拖拽边界

  1. html
    <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