Description
Im having issues when using at the same time dropOrSwap and accepts. The main reason for using them at the same time is dropOrSwap UI update where i want to update UI only after mouse release, and accepts for adding some styles ( like borders) when i hover over other sections where i want to drop item. Using dropZoneParentClass will not help me that much since there will be some complicated logic with custom hooks and actions that depends on draggedNode. This hovering over sections will help me to change styles for them, for example dotted border can drop, blue border cant drop in this section.
In videos you can see that when i use insert logs when hovering over some section are visible, and when i use dropOrSwap logs when hovering are not visible, only after mouse release.
Any help here will be nice. :)
https://github.com/user-attachments/assets/837b03a3-08eb-4faf-8c6b-d48b04f40718
https://github.com/user-attachments/assets/212d4093-10bb-421a-bddc-4020bd43f146
const SidebarSectionContent = ({
sectionId,
channelsList,
}: SidebarSectionContentProps) => {
const [channelRef, channels] = useDragAndDrop<HTMLDivElement, any>(
channelsList,
{
group: "channels",
sortable: false,
accepts: (
targetParentData,
initialParentData,
currentParentData,
state
) => {
console.log("entered in accepts");
const draggedItem = state.draggedNode.data.value;
const isDropDisabled = isSectionDropDisabled({
sectionType,
draggedItem: {
channelId: draggedItem?.id,
sectionId: draggedItem?.sectionId,
},
});
return !isDropDisabled;
},
onTransfer(data) {
console.log("entered in onTransfer");
},
performTransfer({
currentParent,
targetParent,
initialParent,
draggedNodes,
initialIndex,
state,
targetNodes,
}) {
console.log("entered in performTransfer");
},
plugins: [
dropOrSwap({
shouldSwap(data) {
return true;
},
}),
// insert({
// insertPoint: (parent) => {
// const div = document.createElement("div");
// div.classList.add("testSpan");
// return div;
// },
// }),
],
}
);
return (
<div ref={channelRef} className={`items channels-${sectionId}`}>
{channels?.map((channel) => (
<div key={channel.id}>{channel.name}</div>
))}
</div>
);
};
export default SidebarSectionContent;