docs(grid): [grid] optimize drag control demo and e2e (#929)

examples/sites/demos/pc/app/grid/drag/row-drag-ctrl-composition-api.vue

@@ -1,6 +1,11 @@
 <template>
   <tiny-grid :row-class-name="rowClassName" :data="tableData" row-key :drop-config="dropConfig">
     <tiny-grid-column field="id" width="60"></tiny-grid-column>
+    <tiny-grid-column field="name" title="触发源" width="100">
+      <template #default>
+        <div class="only-me-can-drag">拖拽触发源</div>
+      </template>
+    </tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
     <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
@@ -8,7 +13,7 @@
   </tiny-grid>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
 import Sortable from 'sortablejs'
@@ -16,6 +21,7 @@ import Sortable from 'sortablejs'
 const dropConfig = ref({
   plugin: Sortable,
   row: true,
+  trigger: '.only-me-can-drag', // 触发源控制
   filter: '.row__drag-disable', // 根据行的类名来控制是否可以拖动
   onBeforeMove(type, row) {
     if (row.id === '8') return false // return false 时取消拖动
@@ -88,14 +94,20 @@ function rowClassName({ rowIndex }) {
 }
 </script>
 
-<style>
-.sortable-chosen {
+<style scoped>
+.tiny-grid :deep(.sortable-chosen) {
   background: #ceeea9 !important;
 }
-.sortable-drag {
+.tiny-grid :deep(.sortable-drag) {
   background: red !important;
 }
-.row__drag-disable {
+.tiny-grid :deep(.row__drag-disable) {
   background: #f1f1f1 !important;
 }
+.only-me-can-drag {
+  cursor: move;
+}
+.tiny-grid :deep(.row__drag-disable) .only-me-can-drag {
+  cursor: not-allowed;
+}
 </style>

examples/sites/demos/pc/app/grid/drag/row-drag-ctrl.spec.js

@@ -3,17 +3,29 @@ import { test, expect } from '@playwright/test'
 test('拖拽控制', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-drag#drag-row-drag-ctrl')
-  const draggerDom = page.getByRole('cell', { name: 'RFV有限责任公司' })
+  const diabledDragDom = page.getByRole('cell', { name: '拖拽触发源1' })
   // 获取拖拽元素位置
-  const { x, y } = await draggerDom.boundingBox()
+  const { x, y } = await diabledDragDom.boundingBox()
   // 验证不可拖拽
-  await page.mouse.move(x + 2, y + 3)
-  await page.waitForTimeout(200)
+  await diabledDragDom.hover()
   await page.mouse.down()
   await page.waitForTimeout(200)
   await page.mouse.move(x, y + 160)
   await page.waitForTimeout(200)
   await page.mouse.up()
   await page.waitForTimeout(200)
-  await expect(page.locator('.tiny-grid-body__row').nth(5)).not.toContainText('RFV有限责任公司')
+  await expect(page.locator('.tiny-grid-body__row').nth(0)).toContainText('GFD科技YX公司')
+
+  const draggerDom = page.locator('#drag-row-drag-ctrl tbody').getByText('拖拽触发源6')
+  // 获取拖拽元素位置
+  const { x: left, y: top } = await draggerDom.boundingBox()
+  // 验证可拖拽
+  await draggerDom.hover()
+  await page.mouse.down()
+  await page.waitForTimeout(200)
+  await page.mouse.move(left, top - 200)
+  await page.waitForTimeout(200)
+  await page.mouse.up()
+  await page.waitForTimeout(200)
+  await expect(page.locator('.tiny-grid-body__row').nth(0)).toContainText('WSX科技YX公司')
 })

examples/sites/demos/pc/app/grid/drag/row-drag-ctrl.vue

@@ -1,6 +1,11 @@
 <template>
   <tiny-grid :row-class-name="rowClassName" :data="tableData" row-key :drop-config="dropConfig">
     <tiny-grid-column field="id" width="60"></tiny-grid-column>
+    <tiny-grid-column field="name" title="触发源" width="100">
+      <template #default="{ row }">
+        <div class="only-me-can-drag">拖拽触发源{{ row.id }}</div>
+      </template>
+    </tiny-grid-column>
     <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
     <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
@@ -8,7 +13,7 @@
   </tiny-grid>
 </template>
 
-<script lang="jsx">
+<script>
 import { Grid, GridColumn } from '@opentiny/vue'
 import Sortable from 'sortablejs'
 
@@ -22,6 +27,7 @@ export default {
       dropConfig: {
         plugin: Sortable,
         row: true,
+        trigger: '.only-me-can-drag', // 触发源控制
         filter: '.row__drag-disable', // 根据行的类名来控制是否可以拖动
         onBeforeMove(type, row) {
           if (row.id === '8') return false // return false 时取消拖动
@@ -98,14 +104,20 @@ export default {
 }
 </script>
 
-<style>
-.sortable-chosen {
+<style scoped>
+.tiny-grid :deep(.sortable-chosen) {
   background: #ceeea9 !important;
 }
-.sortable-drag {
+.tiny-grid :deep(.sortable-drag) {
   background: red !important;
 }
-.row__drag-disable {
+.tiny-grid :deep(.row__drag-disable) {
   background: #f1f1f1 !important;
 }
+.only-me-can-drag {
+  cursor: move;
+}
+.tiny-grid :deep(.row__drag-disable) .only-me-can-drag {
+  cursor: not-allowed;
+}
 </style>

examples/sites/demos/pc/app/grid/webdoc/grid-drag.js

@@ -18,7 +18,7 @@ export default {
       'name': { 'zh-CN': '拖拽控制', 'en-US': 'Drag Control' },
       'desc': {
         'zh-CN':
-          '<p>可以通过设置 <code>drop-config</code> 的 <code>onBeforeMove</code> 事件控制行拖动，也可以配置<code>drop-config</code> 的 <code>filter</code> 与自定义样式结合使用来限制拖动。</p>\n',
+          '<p>可以通过设置 <code>drop-config</code> 的 <code>onBeforeMove</code> 事件控制行拖动，配置<code>drop-config</code> 的 <code>trigger</code> 来指定拖拽的触发源（一般是 <code>class</code> 类名），也可以配置<code>drop-config</code> 的 <code>filter</code> 与自定义样式结合使用来限制拖动。</p>\n',
         'en-US':
           '<p>You can set the <code>onBeforeMove</code> event of <code>drop-config</code> to control row dragging. You can also configure <code>filter</code> of <code>drop-config</code> in conjunction with a custom style to restrict drag</p>\n'
       },

examples/sites/demos/pc/app/grid/webdoc/grid.js

@@ -2786,6 +2786,8 @@ interface IDropConfig {
   column: boolean
   // 拖拽前函数，返回 false 取消拖动
   onBeforeMove?: ()=> boolean
+  // 拖拽触发源选择器一般是class类名
+  trigger?: string
   // 根据行的类名来控制是否可以拖动
   filter?: string
   // 如果变动了树层级，可以指定是否需要刷新数据