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

Drag 拖拽

实现可拖拽的任意元素

基本用法

<nut-drag>\n  <div class="touch-dom">可点击，可拖拽</div>\n</nut-drag>\n

限制拖拽方向

<nut-drag direction="x">\n  <div class="touch-dom">只能在X轴拖动</div>\n</nut-drag>\n

自动吸边

<nut-drag direction="x" :attract="true">\n  <div class="touch-dom">拖动我</div>\n</nut-drag>\n

限制拖拽边界

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

Prop

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

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