diff --git a/lib/hooks/connectDragRef.ts b/lib/hooks/connectDragRef.ts index daa690605..d48f2bbcc 100644 --- a/lib/hooks/connectDragRef.ts +++ b/lib/hooks/connectDragRef.ts @@ -8,12 +8,23 @@ export function connectDragRef( ) { const scopedOptions = options let prevWatchStop: ReturnType + let prevNode: ConnectableElement | undefined + let prevOptions: Options | undefined return (elementOrNode: ConnectableElement, options?: Options) => { function callConnect() { + const nowOptions = scopedOptions || options + // Avoid repeatedly triggering the connect function when vue patch calls setRef due to data changes in the drag process + if (!isRef(elementOrNode)) { + if (prevNode === elementOrNode && prevOptions === nowOptions) { + return elementOrNode! + } + prevNode = elementOrNode + prevOptions = nowOptions + } return fn( elementOrNode, // Because of the special nature of vue, when it calls setRef, it will pass in two parameters. Therefore, when we pass connect as a setRef function, we may receive a non-ideal options. For this reason, we assume that when there are options in the spec, The options passed in by Connect are no longer adopted to ensure that the options of spec always take precedence over the options of connect - scopedOptions || options + nowOptions ) } diff --git a/lib/internals/TargetConnector.ts b/lib/internals/TargetConnector.ts index e1d6a32e2..0c4a45326 100644 --- a/lib/internals/TargetConnector.ts +++ b/lib/internals/TargetConnector.ts @@ -9,10 +9,6 @@ import { MaybeRef } from '../types/utils' export class TargetConnector implements Connector { public hooks = wrapConnectorHooks({ dropTarget: (node: MaybeRef, options: DropTargetOptions) => { - // Avoid dragging and dropping while Vue keeps calling connect Function - // if (this.dropTargetNode === node && node) { - // return - // } this.clearDropTarget() this.dropTargetOptions = options if (isRef(node)) { diff --git a/package.json b/package.json index e02075baf..13abaaa6e 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,7 @@ "lint-staged": { "*.{js,js,ts,tsx,vue}": [ "prettier --write", - "vitest related" + "vitest related --run" ], "*.{less,css}": [ "stylelint --fix"