Sort items only onEnd

[neo-noire]

Hi, I'm looking for a way to block sorting animation during move event. So basically I'd like to item to change it place only when I drop item to it's new position. I want to replicate notion dnd behavior.

[JeffJassky]

Do something like this:

...
onStart(e: Sortable.SortableEvent) {
  const index = Math.max(e.oldIndex as number, 0)
  const clone = e.from.insertBefore(
	  e.item.cloneNode(true),
	  e.from.children[index]
  ) as HTMLElement
  clone.classList.add('sortable-placeholder')
  clone.classList.remove('sortable-chosen', 'sortable-ghost')
}
...

That will leave a persistent clone in-place whole you drag the selected item around.

Then you just need to style the ghost to turn it into a blue line.

// basically make the sortable ghost completely hidden
.sortable-ghost {
	display: block;
	width: 100%;
	text-indent: -9999px;
	font-size: 0.001px;
	line-height: 0;
	color: transparent;
	border: none;
}

// ensure all content inside of it is hidden
.sortable-ghost * {
	display: none; 
}

// your actual blue line
.sortable-ghost:before {
content: '';
position: absolute;
top: -1.5px;
right: 0;
left: 0;
height: 3px;
background: blue;
border-radius: 3px;
animation: fade 250ms ease-in-out forwards;
}

That's it.

[owen-m1]

As @JeffJassky mentioned, this is 100% possible using custom behaviour in events and classes