* sortable: add canSortTo option to limit drop targets.

easysoft · May 21, 2024 · cc60a03 · cc60a03
1 parent 95570d9
commit cc60a03
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/lib/sortable/dev.ts b/lib/sortable/dev.ts
@@ -45,6 +45,11 @@ onPageUpdate(() => {
         sortable: {
             handle: '.icon-move',
         },
+        canSortTo: function (event, from, to, parentKey) {
+            if (to.text === '技术支持') {
+                return false;
+            }
+        },
         onSort: function (event, orders, parentKey) {
             console.log('> onSort', event, orders, parentKey);
         },

diff --git a/lib/sortable/src/components/sortable-tree.ts b/lib/sortable/src/components/sortable-tree.ts
@@ -2,7 +2,7 @@ import {Tree} from '@zui/tree/src/components';
 import {Sortable} from '../vanilla/sortable';
 
 import type {RenderableProps} from 'preact';
-import type {SortableEvent} from 'sortablejs';
+import type {MoveEvent, SortableEvent} from 'sortablejs';
 import type {ClassNameLike} from '@zui/core';
 import type {Item} from '@zui/common-list';
 import type {SortableTreeProps, SortableTreeState, SortableOptions} from '../types';
@@ -62,6 +62,7 @@ export class SortableTree<P extends SortableTreeProps = SortableTreeProps, S ext
             return;
         }
         const userOptions = typeof sortable === 'object' ? sortable : {};
+        const {onSort, canSortTo, parentKey} = this.props;
         return {
             group: `SortableTree.${this.gid}`,
             dataIdAttr: 'z-key',
@@ -70,9 +71,22 @@ export class SortableTree<P extends SortableTreeProps = SortableTreeProps, S ext
             onSort: (event: SortableEvent) => {
                 const orders = this.getOrders();
                 this.setState({orders});
-                this.props.onSort?.call(this, event, orders, this.props.parentKey);
+                onSort?.call(this, event, orders, parentKey);
                 userOptions.onSort?.call(this, event);
             },
+            onMove: (event: MoveEvent, originEvent: Event) => {
+                if (canSortTo) {
+                    const fromKey = event.dragged.getAttribute('z-key-path');
+                    const toKey = event.related.getAttribute('z-key-path');
+                    const fromItem = this.getItem(fromKey!);
+                    const toItem = this.getItem(toKey!);
+                    const result = canSortTo.call(this, event, fromItem!, toItem!, parentKey);
+                    if (result !== undefined) {
+                        return result;
+                    }
+                }
+                return userOptions.onMove?.call(this, event, originEvent);
+            },
         };
     }
 }
diff --git a/lib/sortable/src/types/sortable-tree-props.ts b/lib/sortable/src/types/sortable-tree-props.ts
@@ -1,9 +1,10 @@
-import type {SortableEvent} from 'sortablejs';
-import type {ItemKey} from '@zui/common-list';
+import type {SortableEvent, MoveEvent} from 'sortablejs';
+import type {ItemKey, Item} from '@zui/common-list';
 import type {TreeOptions} from '@zui/tree';
 import type {SortableOptions} from './sortable-options';
 
 export interface SortableTreeProps extends TreeOptions {
     sortable?: boolean | SortableOptions;
     onSort?: (event: SortableEvent, orders: ItemKey[], parentKey: string | undefined) => void;
+    canSortTo?: (event: MoveEvent, from: Item, to: Item, parentKey: string | undefined) => (boolean | -1 | 1 | void);
 }