OnTransfer event not fired with dragOrSwap plugin.

[khawarizmus]

I have the following setup. Two grids, one for normal cards and one for pinned cards. cards can be transferred between the two grids.

dragAndDrop({
  parent: mainGridContainer,
  values: cardsData,
  dragHandle: ".card-drag-handle",
  draggingClass: "[&>.card]:-rotate-2 before:-rotate-2",
  dropZoneClass: "blur-[2px] opacity-60",
  draggable: (child) => child.id !== "no-drag",
  onSort(data) {
    console.log("main cards sorted", data);
  },
  onDragend: (e) => {
    remapNodes(mainGridContainer.value!);
    remapNodes(pinnedGridContainer.value!);
    console.log("main cards dragged end", e);
  },
  onTransfer: async ({ draggedNodes, sourceParent, targetIndex }) => {
    console.log(
      "main cards transferred",
      draggedNodes,
      sourceParent,
      targetIndex
    );
    const id = (draggedNodes[0].data.value as Card).id;
    if (sourceParent.el === pinnedGridContainer.value) {
      // unpin the card
      console.log("unpinning card", id);
      const { data, error } = await togglePinCard(id, 0);
      if (error.value) {
        // reverse the grid transfer
        interGridTransfer(draggedNodes[0].data.value as Card, { pin: true });
      }

      if (data.value?.data) {
        // update the pinned cards data
        const index = cardsData.value.findIndex(
          (card) => card.id === data.value?.data?.id
        );
        cardsData.value[index] = data.value?.data;
        console.log("data", data.value?.data);
        console.log("index", index);
      }
    }
    remapNodes(mainGridContainer.value!);
    remapNodes(pinnedGridContainer.value!);
  },
  plugins: [dropOrSwap()],
  group: "cards",
});

dragAndDrop<Card>({
  parent: pinnedGridContainer,
  values: pinnedCardsData,
  dragHandle: ".card-drag-handle",
  draggingClass: "[&>.card]:-rotate-2 before:-rotate-2",
  dropZoneClass: "blur-[2px] opacity-60",
  onSort(data) {
    console.log("pinned cards sorted", data);
  },
  onDragend: (e) => {
    remapNodes(pinnedGridContainer.value!);
    remapNodes(mainGridContainer.value!);
    console.log("pinned cards dragged end", e);
  },
  onTransfer: async ({ draggedNodes, sourceParent, targetIndex }) => {
    console.log(
      "pinned cards transferred",
      draggedNodes,
      sourceParent,
      targetIndex
    );
    const id = (draggedNodes[0].data.value as Card).id;
    if (sourceParent.el === mainGridContainer.value) {
      console.log("pinning card", id);
      // pin the card
      const { data, error } = await togglePinCard(id, 1);
      if (error.value) {
        // reverse the grid transfer
        interGridTransfer(draggedNodes[0].data.value as Card, { pin: false });
      } else if (data.value?.data) {
        // update the pinned cards data
        const index = pinnedCardsData.value.findIndex(
          (card) => card.id === data.value?.data?.id
        );
        pinnedCardsData.value[index] = data.value?.data;
      }
      remapNodes(pinnedGridContainer.value!);
      remapNodes(mainGridContainer.value!);
    }
  },
  accepts: (target) => {
    if (
      target.el === pinnedGridContainer.value &&
      target.data.enabledNodes.length < appConfig.pinnedCardsLimit
    ) {
      return true;
    }
    return false;
  },
  plugins: [dropOrSwap()],
  group: "cards",
});

I am facing two issues.

1- When i use the dragOrSwap plugin the onTransfer event is not fired and therefor the code to update the backend is not triggered.

2- The reason i had to use dragOrSwap in the first-place. was because when i drag a card over between the two grids to transfer it when the user is not fast it inserts two cards instead of one.

I am not sure how to fix any of the above two issues. I would appreciate any hints

[khawarizmus]

Same behaviour with the insert plugin.

[khawarizmus]

I found a work around by useing the onDragEnd event parent to figure out if a transfer happned.

dragAndDrop({
  parent: mainGridContainer,
  values: cardsData,
  dragHandle: ".card-drag-handle",
  draggingClass: "[&>.card]:-rotate-2 before:-rotate-2",
  dropZoneClass: "blur-[2px] opacity-60",
  draggable: (child) => child.id !== "no-drag",
  onSort(data) {
    console.log("main cards sorted", data);
  },
  onDragend: async ({ parent, draggedNode }) => {
    if (parent.el === pinnedGridContainer.value) {
      // pinning the card
      const id = (draggedNode.data.value as Card).id;
      const { data, error } = await togglePinCard(id, 1);
      if (error.value) {
        // reverse the grid transfer
        interGridTransfer(draggedNode.data.value as Card, { pin: false });
      }

      if (data.value?.data) {
        // update the pinned cards data
        const index = pinnedCardsData.value.findIndex(
          (card) => card.id === data.value?.data?.id
        );
        pinnedCardsData.value[index] = data.value?.data;
      }
    }
    remapNodes(mainGridContainer.value!);
    remapNodes(pinnedGridContainer.value!);
  },
  plugins: [dropOrSwap()],
  group: "cards",
});

dragAndDrop<Card>({
  parent: pinnedGridContainer,
  values: pinnedCardsData,
  dragHandle: ".card-drag-handle",
  draggingClass: "[&>.card]:-rotate-2 before:-rotate-2",
  dropZoneClass: "blur-[2px] opacity-60",
  onSort(data) {
    console.log("pinned cards sorted", data);
  },
  onDragend: async ({ draggedNode, parent }) => {
    if (parent.el === mainGridContainer.value) {
      // unpin the card
      const id = (draggedNode.data.value as Card).id;
      // transfer the card to the pinned grid
      const { data, error } = await togglePinCard(id, 0);
      if (error.value) {
        // reverse the grid transfer
        interGridTransfer(draggedNode.data.value as Card, { pin: true });
      } else if (data.value?.data) {
        // update the unpinned cards data
        const index = cardsData.value.findIndex(
          (card) => card.id === data.value?.data?.id
        );
        cardsData.value[index] = data.value?.data;
      }
    }
    remapNodes(pinnedGridContainer.value!);
    remapNodes(mainGridContainer.value!);
  },
  accepts: (target) => {
    if (
      target.el === pinnedGridContainer.value &&
      target.data.enabledNodes.length < appConfig.pinnedCardsLimit
    ) {
      return true;
    }
    return false;
  },
  plugins: [dropOrSwap()],
  group: "cards",
});