Usage with transitions

[dangodai]

Hi, thanks for the port. I haven't used the original, but the port seems feature complete and behaving as expected.

I've spent a week trying to implement a hobby project with this library (after ruling out every other DnD library as being too limited or incompatible with Svelte's data first model), and while this library seems the most promising I just can't seem to get things working quite right.

Most fundamentally, I would ask if this library is considered compatible with animations/transitions (crossfade and flip in particular)? I see some examples are using crossfade, but in my use case nothing I do seems to work without the Svelte animation code spewing out errors and/or infinite loops I think from collision detection.

More generally, do you have any advice on implementing a multi-container sortable solution (e.g. kanban board) with crossfade transitions, and a backing data structure like:

interface {
    ...someTopLevelData
    sections: {
        ...someSectionData
        items: {
            ...someItemData
        }[]
    }[]
}

Where each section is a sortable context, and each item is a sortable? If you are open to updating your examples, I think this structure is a more likely implementation than the $derived columns from your kanban example.

I have tried moving items onDragOver to the new section (pushing it to the end of the new section), but then crossfade moving between columns always starts the transition from the bottom of the section instead of the previous hover position. I have also tried inserting the items at the correct index onDragOver with some success, though it didn't seem recommended by the original dnd-kit. Regardless of those two strategies, I can't seem to get away from Svelte animation errors or the script freezing from an infinite loop moving back and forth between two sections.

Crossfade is important for my use-case, because I would like my data to be able to live updated from the server, and it would be confusing to understand without animations/transitions.

Sorry for the messy question, I've just tried so many things with limited ability or understanding for debugging Svelte animation errors or the cause of collision detection infinite loops that I'm not sure what makes sense anymore.

Thanks

[hanielu]

@dangodai Could you please create a repo with a minimal reproduction of your failing current implementation?

[dangodai]

@hanielu Sure. I had a lot of abstractions and business logic tied up with my implementation, but I've tried to strip it down as much as can. Hopefully nothing distracting is remaining. Here is the repo: https://github.com/dangodai/dnd-kit-multi-container/

It should run with a standard npm install && npm run dev.

This implementation is the variation where I move the Sortable (Ticket in this code) in onDragOver. I currently have crossfade disabled but you can see the error it produces by swapping the comment at src/routes/+page.svelte lines 127/128:

<!-- <div in:receive={{ key: ticket.id }} out:send={{ key: ticket.id }}> -->
<div>

I have added a log every time a Sortable/ticket moves.

Try dragging a ticket between directly in the middle of two of the board sections (columns) and you will get an infinite loop with logs like

Moving ticket id=1 from [0,1] to [1,1]
Moving ticket id=1 from [1,1] to [0,1]
Moving ticket id=1 from [0,1] to [1,1]
Moving ticket id=1 from [1,1] to [0,1]
Moving ticket id=1 from [0,1] to [1,1]
Moving ticket id=1 from [1,1] to [0,1]

Or if you turn on crossfade, you will get errors along the lines of

Uncaught TypeError: a is undefined

  in Droppable.svelte
  in sortable-context.svelte
  in dnd-context.svelte
  in +page.svelte
  in +layout.svelte
  in root.svelte

I should repeat that I've tried about a dozen approaches now including all of the built in collision detection strategies, a custom strategy, only moving the tickets to the current index onDragEnd, etc.; I have no idea if any of them were on the right track . If you think a different approach is better I can create a different reproduction for you.

Thanks again for any help.

[hanielu]

@dangodai This works great for me, major changes:

• Getting rid of the closestCorners collision detection and verticalListSortingStrategy strategy for the sortable context
• Making sure the arrays are only updated when either moving between different sortable contexts or on drag end when moving sortable items within its own sortable context

<script lang="ts">
	import {
		defaultDropAnimationSideEffects,
		DndContext,
		DragOverlay,
		type DragEndEvent,
		type DragOverEvent,
		type DragStartEvent,
		type DropAnimation,
		type UniqueIdentifier
	} from '@dnd-kit-svelte/core';
	import Droppable from './Droppable.svelte';
	import Sortable from './Sortable.svelte';
	import type { PageData } from './$types';
	import { SortableContext } from '@dnd-kit-svelte/sortable';
	import { crossfade } from 'svelte/transition';

	let { data }: { data: PageData } = $props();
	let board = $state(data.board);

	const [send, receive] = crossfade({ duration: 200 });

	function arrayMove2d(
		currentSectionIndex: number,
		currentPosition: number,
		newSectionIndex: number,
		newPosition?: number
	) {
		newPosition = newPosition ?? board.sections[newSectionIndex].tickets.length;

		const movedItem = board.sections[currentSectionIndex].tickets.splice(currentPosition, 1).pop()!;

		console.log(
			`Moving ticket id=${movedItem.id} from [${currentSectionIndex},${currentPosition}] to [${newSectionIndex},${newPosition}]`
		);

		board.sections[newSectionIndex].tickets.splice(newPosition, 0, movedItem);
	}

	function findTicketInBoardById(
		id: number | null
	):
		| { sectionIndex: number; ticketIndex: number; ticket: { id: number; title: string } }
		| undefined {
		for (let [sectionIndex, section] of board.sections.entries()) {
			for (let [ticketIndex, ticket] of section.tickets.entries()) {
				if (ticket.id == id) {
					return {
						sectionIndex,
						ticketIndex,
						ticket
					};
				}
			}
		}
	}

	let activeId: UniqueIdentifier | undefined = $state();
	const activeTicket = $derived(findTicketInBoardById(activeId as number)?.ticket);
	let targetSectionIndex: number | null = null;
	let targetPosition: number | null = null;

	function handleDragStart({ active }: DragStartEvent) {
		activeId = active.id;
		targetSectionIndex = null;
		targetPosition = null;
	}

	function handleDragEnd({ over }: DragEndEvent) {
		if (over == null || activeId == null) {
			activeId = undefined;
			return;
		}

		const activeTicketInfo = findTicketInBoardById(activeId as number)!;
		if (targetSectionIndex !== null && targetSectionIndex === activeTicketInfo.sectionIndex) {
			arrayMove2d(
				activeTicketInfo.sectionIndex,
				activeTicketInfo.ticketIndex,
				targetSectionIndex,
				targetPosition ?? undefined
			);
		}

		activeId = undefined;
		targetSectionIndex = null;
		targetPosition = null;
	}

	function handleDragOver({ over, active }: DragOverEvent) {
		if (over == null || activeId == null) return;

		const activeTicketInfo = findTicketInBoardById(activeId as number)!;
		const isSection = over.id.toString().startsWith('section-');
		const newSectionIndex = isSection
			? board.sections.findIndex((s) => s.id == parseInt((over.id as string).substring(8)))
			: findTicketInBoardById(over.id as number)!.sectionIndex;

		const newPosition = isSection
			? undefined
			: findTicketInBoardById(over.id as number)!.ticketIndex;

		// Move immediately if changing sections
		if (newSectionIndex !== activeTicketInfo.sectionIndex) {
			arrayMove2d(
				activeTicketInfo.sectionIndex,
				activeTicketInfo.ticketIndex,
				newSectionIndex,
				newPosition
			);
		}

		targetSectionIndex = newSectionIndex;
		targetPosition = newPosition ?? null;
	}

	const dropAnimation: DropAnimation = {
		sideEffects: defaultDropAnimationSideEffects({
			styles: {
				active: {
					opacity: '0.5'
				}
			}
		})
	};
</script>

<div class="p-10">
	<span class="text-2xl font-bold">
		{data.board.title}
	</span>

	<DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd} onDragOver={handleDragOver}>
		<div class="flex flex-row space-x-2 overflow-x-scroll rounded border p-2 shadow-lg">
			{#each board.sections as section (section.id)}
				<SortableContext items={section.tickets}>
					<Droppable id={`section-${section.id}`}>
						<div
							class="bg-base-200 flex h-full min-h-64 w-72 shrink-0 flex-col items-stretch gap-2 rounded border p-2 shadow"
						>
							<span class="font-semibold">
								{section.title}
							</span>
							<div class="flex h-full grow flex-col gap-2">
								{#each section.tickets as ticket (ticket.id)}
									<div in:receive={{ key: ticket.id }} out:send={{ key: ticket.id }}>
										<!-- <div> -->
										<Sortable id={ticket.id} {ticket} />
									</div>
								{/each}
							</div>
						</div>
					</Droppable>
				</SortableContext>
			{/each}
		</div>
		<DragOverlay {dropAnimation} className="shadow-2xl shadow-black">
			{#if activeTicket}
				<Sortable ticket={activeTicket} id="DragOverlay-{activeId}" />
			{/if}
		</DragOverlay>
	</DndContext>
</div>

[dangodai]

Thank you for the reply and help. That implementation is roughly what I first tried (although the details of the implementation were quite different). However, using the code you've provided

1. I still get errors from the Svelte animation (which then causes things on page to start breaking afterwards, such as tickets floating around and becoming unresponsive):

EDIT: Actually with your code sample, when turning crossfade off I still get the infinite loops of switching back and forth between containers, so it seems like all of the same errors remain although the triggers might be slightly different

2025-02-13.16-52-02.mp4

2. The crossfade animation will start playing from where the ticket is actually located in the array, rather than from the previously hovered location. For example, if you drag a ticket between columns at index 0, the crossfade will start from the bottom of the previous column since that's where we insert the ticket onDragOver.

3. I forgot to include this in my minimal reproduction, but my tickets have variable height. To get the CSS translation (from the CSS helper) to work correctly, it seemed that I need to use the verticalListSortingStrategy strategy. I have updated my repo with your code, and included a ticket with a different height from the rest. I have excluded verticalListSortingStrategy for the time being, so you can see how the sorting doesn't behave nicely.

Any help is appreciated.

PS. Do you have any specific plans regarding this repo? I.e., are you keeping it a 1:1 port with the React library? I think I may have found some type errors, I haven't checked if they exist in the React library, but are you accepting PRs if they differ from the React library?