diff --git a/lib/sortable/src/style/sortable-list.css b/lib/sortable/src/style/sortable-list.css
index ea44ae07b3..a60e880d00 100644
--- a/lib/sortable/src/style/sortable-list.css
+++ b/lib/sortable/src/style/sortable-list.css
@@ -4,3 +4,6 @@
 .sortable-list .sortable-ghost > .listitem {
   @apply -bg-warning-50;
 }
+.sortable-empty-shadow {
+  @apply !-opacity-0 !-absolute !-pointer-events-none !-left-0 !-top-0 !-w-px !-h-px;
+}
diff --git a/lib/sortable/src/vanilla/sortable.ts b/lib/sortable/src/vanilla/sortable.ts
index ed85cb8edc..37642f4a61 100644
--- a/lib/sortable/src/vanilla/sortable.ts
+++ b/lib/sortable/src/vanilla/sortable.ts
@@ -20,7 +20,7 @@ export class Sortable extends Component<SortableOptions> {
             options.setData = ((dataTransfer, dragEl) => {
                 if (dragShadow === false && !this._emptyShadow) {
                     this._emptyShadow = dragEl.cloneNode(true) as HTMLElement;
-                    this._emptyShadow.style.opacity = '0!important';
+                    this._emptyShadow.classList.add('sortable-empty-shadow');
                     document.body.appendChild(this._emptyShadow);
                 }
                 dataTransfer.setDragImage(dragShadow === false ? this._emptyShadow! : dragShadow, 0, 0);