Moving between lists that share data

[codetakki]

We have a product that needs a simple way to manual reorder items in a list that can have 100+ items.
To make it easier to move a item from slot 1 to 100 we want to have two lists side by side that can be scrolled individual, but share the same data.

I have gotten pretty close to this, but still have some issues that would have to be fixed.

1. Would it be possible to hide the original object that is being moved from both lists?
   So that only the preview item of the row is visible?
2. Do you have any other suggestion on how to achieve this behavior?

I have created a simple vue3 codesandbox with a demo: https://codesandbox.io/p/github/codetakki/sort-same-list-poc/

[sumit-2007-git]

To hide the original item being moved so that only the dragged preview (or drag clone) is visible during transit between linked lists, you can configure Sortable's built-in CSS class hooks:

Solution:

When SortableJS begins a drag, it applies ghostClass to the placeholder left in the original list and chosenClass to the selected item.

import Sortable from 'sortablejs';

const options = {
  group: 'shared-data-list',
  animation: 150,
  ghostClass: 'sortable-hidden-ghost',
  chosenClass: 'sortable-hidden-chosen',
  forceFallback: true, // Optional: ensures consistent preview rendering
  fallbackClass: 'sortable-drag-preview'
};

new Sortable(document.getElementById('list-left'), options);
new Sortable(document.getElementById('list-right'), options);

Accompanying CSS:

/* Hides the placeholder left in the list while dragging */
.sortable-hidden-ghost {
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Hides the original row if not using fallback */
.sortable-hidden-chosen {
  opacity: 0 !important;
}

/* Style the floating preview item */
.sortable-drag-preview {
  opacity: 0.9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

Setting opacity: 0 !important; visibility: hidden !important; on ghostClass completely removes the original element from view while maintaining drag event tracking across the two scrollable containers.