feat: drag修改demo (#387)

src/packages/drag/demo.vue

@@ -4,14 +4,21 @@
     <nut-drag :style="{ top: '100px', left: '8px' }">
       <div class="drag-demo">触摸移动</div>
     </nut-drag>
-    <!-- <h2>限制拖拽方向</h2>
-    <nut-drag direction="x"  >
+    <h2 style="top:30px;position:relative">限制拖拽方向</h2>
+    <nut-drag direction="x" :style="{ top: '200px', left: '8px' }">
       <div class="drag-demo">只能X轴拖拽</div>
     </nut-drag>
-    <nut-drag direction="y"  >
+    <nut-drag direction="y" :style="{ top: '200px', right: '50px' }">
       <div class="drag-demo">只能Y轴拖拽</div>
-    </nut-drag> -->
-    <div class="drag" ref="drag" @touchstart="touchstart($event)">拖拽测试</div>
+    </nut-drag>
+    <h2 style="top:70px;position:relative">自动吸边</h2>
+    <nut-drag
+      direction="x"
+      :attract="true"
+      :style="{ top: '300px', left: '8px' }"
+    >
+      <div class="drag-demo">拖动我</div>
+    </nut-drag>
   </div>
 </template>
 
@@ -20,46 +27,7 @@ import { ref, reactive, toRefs, watch } from 'vue';
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('drag');
 export default createDemo({
-  setup() {
-    const drag = ref();
-    const state = reactive({
-      infoX: 0,
-      infoY: 0
-    });
-    function touchMove(e: { currentTarget: any; targetTouches: any[] }) {
-      const target = e.currentTarget;
-      const element = e.targetTouches[0];
-      console.log(element.clientX, element.clientY, state.infoX, state.infoY);
-      const x = element.clientX - state.infoX;
-      const y = element.clientY - state.infoY;
-      console.log(x, y);
-      element.target.style.cssText = `transform: translate3d(${x}px, ${y}px ,1px);`;
-      //  element.target.style.transform= `translate(${x}px, ${y}px)`
-    }
-    function touchEnd(e) {
-      // e.target.style.cssText = `transform: none;`
-    }
-    function touchstart(e: {
-      targetTouches: any[];
-      target: { offsetTop: any };
-    }) {
-      const element = e.targetTouches[0];
-      state.infoX = element.clientX;
-      state.infoY = element.clientY;
-      console.log(e.target.offsetTop);
-      // console.log(state.infoX,state.infoY)
-      // console.log(element.clientX,state.infoX,element.clientY,state.infoY)
-      drag.value.addEventListener('touchmove', touchMove, false);
-      drag.value.addEventListener('touchend', touchEnd, false);
-    }
-    return {
-      drag,
-      state,
-      touchstart,
-      touchMove,
-      touchEnd
-    };
-  }
+  setup() {}
 });
 </script>
 

src/packages/drag/index.vue

@@ -72,7 +72,7 @@ export default create({
       );
     }
 
-    function goLeft(target) {
+    function goLeft(target: any) {
       if (state.boundary.left) {
         if (target.style.left.split('px')[0] > state.boundary.left) {
           target.style.left = target.style.left.split('px')[0] - 10 + 'px';
@@ -89,7 +89,7 @@ export default create({
         }
       }
     }
-    function goRight(target, rightLocation) {
+    function goRight(target: any, rightLocation: any) {
       if (rightLocation - parseInt(target.style.left.split('px')[0]) > 10) {
         target.style.left =
           parseInt(target.style.left.split('px')[0]) + 10 + 'px';
@@ -98,7 +98,7 @@ export default create({
         target.style.left = rightLocation + 'px';
       }
     }
-    function touchMove(e) {
+    function touchMove(e: any) {
       e.preventDefault();
       const target = e.currentTarget;
       if (e.targetTouches.length == 1) {
@@ -137,7 +137,7 @@ export default create({
         }
       }
     }
-    function touchEnd(e) {
+    function touchEnd(e: any) {
       const target = e.currentTarget;
       const touch = e.changedTouches[0];
       let currX = touch.clientX;
@@ -165,7 +165,7 @@ export default create({
         target.style.top = state.yPum + 'px';
       }
     }
-    function touchstart(e) {
+    function touchstart(e: any) {
       const target = e.currentTarget;
       state.startTop = target.offsetTop; // 元素距离顶部的距离
       state.startLeft = target.offsetLeft; // 元素距离左侧的距离