feat: 增加拖拽组件的文档

src/packages/drag/demo.vue

@@ -4,16 +4,15 @@
       >此 Demo 仅能在移动端浏览器体验，建议在 Android 或 iOS 设备上体验。
     </nut-noticebar>
     <h4>基本用法</h4>
-    <nut-drag name="demo1" :style="{ top: '100px', left: '8px' }">
-      <div class="touch-dom">基本用法</div>
+    <nut-drag @click.native="click" :style="{ top: '100px', left: '8px' }">
+      <div class="touch-dom">可点击，可拖拽</div>
     </nut-drag>
     <h4 :style="{ top: '150px' }">限制拖拽方向</h4>
-    <nut-drag name="demo2" direction="x" :style="{ top: '200px', left: '8px' }">
+    <nut-drag direction="x" :style="{ top: '200px', left: '8px' }">
       <div class="touch-dom">只能在X轴拖动</div>
     </nut-drag>
     <h4 :style="{ top: '250px' }">自动吸边</h4>
     <nut-drag
-      name="demo3"
       direction="x"
       :attract="true"
       :style="{ top: '300px', left: '8px' }"
@@ -24,7 +23,6 @@
     <div class="drag-boundary"></div>
     <nut-drag
       :boundary="{ top: 401, left: 9, bottom: bottom(), right: right() }"
-      name="demo4"
       :attract="true"
       :style="{ top: '400px', left: '8px' }"
     >
@@ -46,11 +44,19 @@ export default {
     bottom() {
       return document.documentElement.clientHeight - 601;
     },
+    click() {
+      this.$toast.text("点击了拖拽元素");
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.nut-drag {
+  position: absolute;
+  cursor: pointer;
+  user-select: none;
+}
 .touch-dom {
   height: 30px;
   padding: 10px;

src/packages/drag/doc.md

@@ -0,0 +1,59 @@
+# Drag 拖拽
+实现可拖拽的任意元素
+
+## 基本用法
+```html
+<nut-drag @click.native="click">
+  <div class="touch-dom">可点击，可拖拽</div>
+</nut-drag>
+<script>
+export default {
+  methods: {
+    click() {
+      this.$toast.text("点击了拖拽元素");
+    },
+  },
+};
+</script>
+```
+## 限制拖拽方向
+```html
+<nut-drag direction="x">
+  <div class="touch-dom">只能在X轴拖动</div>
+</nut-drag>
+```
+## 自动吸边
+```html
+<nut-drag direction="x" :attract="true">
+  <div class="touch-dom">拖动我</div>
+</nut-drag>
+```
+## 限制拖拽边界
+```html
+<nut-drag
+  :boundary="{ top: 401, left: 9, bottom: bottom(), right: right() }"
+  :attract="true"
+>
+  <div class="touch-dom">拖动我</div>
+</nut-drag>
+<script>
+export default {
+  methods: {
+    right() {
+      return document.documentElement.clientWidth - 300 - 9;
+    },
+    bottom() {
+      return document.documentElement.clientHeight - 601;
+    },
+  },
+};
+</script>
+```
+## Prop
+
+| 字段      | 说明                                              | 类型           | 默认值                              |
+| :-------- | :------------------------------------------------ | :------------- | :---------------------------------- |
+| attract   | 是否开启自动吸边                                  | Boolean        | false                                |
+| direction | 拖拽元素的拖拽方向限制，**x**/**y**/**all**三选一 | String         | 'all'                               |
+| z-index   | 拖拽元素的堆叠顺序                                | Number, String | 11                                  |
+| boundary  | 拖拽元素的拖拽边界                                | Object         | {top: 0,left: 0,right: 0,bottom: 0} |