import{c as t,o as e,C as l}from"./vendor.870c33cc.js";const o={class:"markdown-body"},n=l('

Drag 拖拽

介绍

实现可拖拽的任意元素

安装

import { createApp } from 'vue';\nimport { Drag } from '@nutui/nutui@taro';\n\nconst app = createApp();\napp.use(Drag);\n

限制拖拽边界

<nut-drag style="width: 90%; height: 200px; border: 1px solid red" direction="all" width="120"height="40">\n    <nut-button style="width: 120px; height: 40px" type="primary">触摸移动</nut-button>\n</nut-drag>\n

限制拖拽方向

 <nut-drag direction="x" width="120" height="40">\n      <nut-button style="width: 120px; height: 40px" type="primary">只能X轴拖拽</nut-button>\n </nut-drag>\n <nut-drag direction="y" width="120" height="40">\n    <nut-button style="width: 120px; height: 40px" type="primary">只能X轴拖拽</nut-button>\n </nut-drag>\n

不限制边界

 <nut-drag direction="all" width="120" height="40">\n    <nut-button style="width: 120px; height: 40px" type="primary" >触摸移动</nut-button>\n </nut-drag>\n

Prop

字段	说明	类型	默认值
width	子元素宽度	string	‘’
height	子元素高度	string	‘’
direction	拖拽元素的拖拽方向限制，x/y/all三选一	String	‘all’
boundary	拖拽元素的拖拽边界	Object	{top: 0,left: 0,right: 0,bottom: 0}

',13),u={expose:[],setup:l=>(l,u)=>(e(),t("div",o,[n]))};export default u;