feat(Fab): add dragstart and dragend events (#3388)

* feat(Fab): add drag-start and drag-end events

* docs(Fab): update api docs

src/fab/README.en-US.md

@@ -20,6 +20,8 @@ y-bounds | Array | - | Typescript：`Array<string \| number>` | N
 name | params | description
 -- | -- | --
 click | `({e: Event})` | \-
+drag-end | `(e: TouchEvent)` | \-
+drag-start | `(e: TouchEvent)` | \-
 
 ### CSS Variables
 

src/fab/README.md

@@ -74,6 +74,8 @@ y-bounds | Array | - | 设置垂直方向边界限制，示例：[48, 48] 或 ['
 名称 | 参数 | 描述
 -- | -- | --
 click | `({e: Event})` | 悬浮按钮点击事件
+drag-end | `(e: TouchEvent)` | 结束拖拽时触发
+drag-start | `(e: TouchEvent)` | 开始拖拽时触发
 
 ### CSS Variables
 

src/fab/__test__/__snapshots__/demo.test.js.snap

@@ -41,7 +41,8 @@ exports[`Fab Fab draggable demo works fine 1`] = `
       ]
     }}"
     bind:click="handleClick"
-    bind:move="handleMove"
+    bind:dragend="handleDragEnd"
+    bind:dragstart="handleDragStart"
   />
 </draggable>
 `;

src/fab/_example/draggable/index.js

@@ -1,10 +1,15 @@
 Component({
   methods: {
     handleClick(e) {
-      console.log(e);
+      console.log('handleClick: ', e);
     },
-    handleMove(e) {
-      console.log(e);
+
+    handleDragStart(e) {
+      console.log('handleDragStart: ', e);
+    },
+
+    handleDragEnd(e) {
+      console.log('handleDragEnd: ', e);
     },
   },
 });

src/fab/_example/draggable/index.wxml

@@ -1,10 +1,11 @@
 <t-fab
   icon="gesture-press"
   text="拖我"
-  bind:click="handleClick"
-  bind:move="handleMove"
   aria-label="增加"
   usingCustomNavbar
   draggable
   y-bounds="{{[0, 32]}}"
+  bind:click="handleClick"
+  bind:dragstart="handleDragStart"
+  bind:dragend="handleDragEnd"
 ></t-fab>

src/fab/fab.ts

@@ -50,6 +50,11 @@ export default class Fab extends SuperComponent {
     onTplButtonTap(e) {
       this.triggerEvent('click', e);
     },
+
+    onStart(e) {
+      this.triggerEvent('dragstart', e.detail.e);
+    },
+
     onMove(e) {
       const { yBounds } = this.properties;
       const { distanceTop } = this.data;
@@ -64,6 +69,11 @@ export default class Fab extends SuperComponent {
         moveStyle: `right: ${right}px; bottom: ${bottom}px;`,
       });
     },
+
+    onEnd(e) {
+      this.triggerEvent('dragend', e.detail.e);
+    },
+
     computedSize() {
       if (!this.properties.draggable) return;
       const insChild = this.selectComponent('#draggable');

src/fab/template/draggable.wxml

@@ -6,7 +6,9 @@
     id="draggable"
     style="right: 16px; bottom: 32px; {{_._style([style, customStyle, moveStyle])}}"
     direction="{{draggable === true ? 'all' : draggable}}"
+    bind:start="onStart"
     bind:move="onMove"
+    bind:end="onEnd"
   >
     <template is="button" data="{{...buttonData}}" />
   </t-draggable>