Transitions not working in combination with drag and drop

When you have a draggable list that has transitions, as soon as you drag an item, it is removed from the list. You can still drag it around, but it’s impossible to get it back into the list. I’d like to have transitions for adding items to and deleting items from the draggable list.

How to reproduce

Go to the Svelte REPL and enter the following code:

<style>
	div {
		height: 1.5em;
		width: 10em;
		text-align: center;
		border: 1px solid black;
		margin: 0.2em;
		padding: 0.3em;
	}
</style>
<script>
	import {dndzone} from 'svelte-dnd-action';
	import {fade} from 'svelte/transition';
	function handleSort(e) {
		items = e.detail.items;
	}
	let items = [
		{id:1, title: 'I'},
		{id:2, title: 'Am'},
		{id:3, title: 'Yoda'}
	];
</script>
<section use:dndzone={{items}} on:consider={handleSort} on:finalize={handleSort}>
	{#each items as item(item.id)}
		<div transition:fade>
			{item.title}	
		</div>
	{/each}
</section>

(Code based on this article.)

See that the item disappears from the list as soon as you start dragging and that it is impossible to put it back in the list.

When starting to drag, this error appears in the console:

action.js:360 Uncaught (in promise) TypeError: Cannot read property 'hasOwnProperty' of undefined
    at configure (action.js:360)
    at update (action.js:380)
    at Object.update [as p] (PlayerList.svelte:13)
    at update (index.mjs:730)
    at flush (index.mjs:699)

(The error is from my personal project, not from the REPL, because the REPL console doesn’t show the source files and line numbers as clearly.)

When you remove transition:fade from the item div, everything is working perfectly again.

My (totally uneducated) guess is that the transition removes the element from the DOM, while svelte-dnd-action does not know about this. Could this be the case? Is it possible to make this work?

[isaacHagoel]

@EmielH it gets hairy when state changes are involved. I was referring mainly to this: https://github.com/sveltejs/svelte/pull/4999 see this tweetstorm which is also linked from the PR for more details

[odinhb]

So I just ran into this issue when trying to use crossfade, and have been experimenting w/ the suggested workarounds in the svelte REPL.

Problem is, unlike the fade transitions, I can’t seem to get the workaround to… work.

I’m just gonna leave this here: REPL, and resort to removing the crossfade transition.

My REPL showcases the neccessity of the crossfade transition, which is that non-drag-n-drop changes to the data can be pretty jarring without crossfade.