import{e as a,o as t,G as n}from"./vendor.bd251973.js";const l={class:"markdown-body"},p=n(`

Drag \u62D6\u62FD

\u4ECB\u7ECD

\u5B9E\u73B0\u53EF\u62D6\u62FD\u7684\u4EFB\u610F\u5143\u7D20

\u5B89\u88C5

import { createApp } from 'vue';
import { Drag } from '@nutui/nutui';

const app = createApp();
app.use(Drag);

\u57FA\u672C\u7528\u6CD5

<nut-drag>
  <div class="touch-dom">\u53EF\u70B9\u51FB\uFF0C\u53EF\u62D6\u62FD</div>
</nut-drag>

\u9650\u5236\u62D6\u62FD\u65B9\u5411

<nut-drag direction="x">
  <div class="touch-dom">\u53EA\u80FD\u5728X\u8F74\u62D6\u52A8</div>
</nut-drag>

\u81EA\u52A8\u5438\u8FB9

<nut-drag direction="x" :attract="true">
  <div class="touch-dom">\u62D6\u52A8\u6211</div>
</nut-drag>

\u9650\u5236\u62D6\u62FD\u8FB9\u754C

<nut-drag
  :boundary="{ top: 401, left: 9, bottom: bottom(), right: right() }"
  :attract="true"
>
  <div class="touch-dom">\u62D6\u52A8\u6211</div>
</nut-drag>
<script>
 setup() {
    function right() {
      return document.documentElement.clientWidth - 300 - 9;
    }
    function bottom() {
      return document.documentElement.clientHeight - 559;
    }
    return {
      right,
      bottom
    };
  }
</script>

Prop

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
attract	\u662F\u5426\u5F00\u542F\u81EA\u52A8\u5438\u8FB9	Boolean	false
direction	\u62D6\u62FD\u5143\u7D20\u7684\u62D6\u62FD\u65B9\u5411\u9650\u5236\uFF0Cx/y/all\u4E09\u9009\u4E00	String	\u2018all\u2019
boundary	\u62D6\u62FD\u5143\u7D20\u7684\u62D6\u62FD\u8FB9\u754C	Object	{top: 0,left: 0,right: 0,bottom: 0}

`,15),e=[p],d={setup(c,{expose:s}){return s({frontmatter:{}}),(r,o)=>(t(),a("div",l,e))}};export{d as default};