JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rubaxa.github.io/Sortable/Sortable.js"></script>
<h1>Custom drag ghost</h1>
<ul id="custom-drag-ghost-list">
  <li>item 1</li>
  <li>item 2</li>
  <li><a href="#">item 3</a></li>
</ul>



<h1>Hidden drag ghost</h1>
<ul id="hidden-drag-ghost-list">
  <li>item 1</li>
  <li>item 2</li>
  <li><a href="#">item 3</a></li>
</ul>

CSS

/* Custom drag ghost list */
#custom-drag-ghost-list li {
  /* Note that you can specify "width" & "height" to avoid potential clone incorrect size */
  
  /* Just for appearance */
  background-color: #d0bcd5;
  border: 1px solid #a499b3;
}
.custom-drag-ghost {
  /* The original cloned element must not take place up in the page and must not be visible */
  
  
  /* Just for appearance */
  background-color: #d0bcd5;
  border: 1px solid #e8871e;
  width: 100px;

  backface-visibility: hidden;
  transform: translate3d(0,0,0);

  opacity: 1;
  
  z-index: 1;
}



/* Hidden drag ghost list */
#hidden-drag-ghost-list li {
  /* Note that you can specify "width" & "height" to avoid potential clone incorrect size */
  
  /* Just for appearance */
  background-color: #98dfaf;
  border: 1px solid #5fb49c;
}
.hidden-drag-ghost {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}

JavaScript

// will be a DOM object.
// Avoiding to redefine the variable with "var" each time the drag event is emitted.
var dragGhost = {};


var customDragGhostList = new Sortable(document.getElementById('custom-drag-ghost-list'), {
  // Just for appearance
  animation: 150,
  
  setData: function (dataTransfer, dragEl) {
    // Create the clone (with content)
    dragGhost = dragEl.cloneNode(true);
    // Stylize it
    dragGhost.classList.add('custom-drag-ghost');
    // Place it into the DOM tree
    document.body.appendChild(dragGhost);
    // Set the new stylized "drag image" of the dragged element
    dataTransfer.setDragImage(dragGhost, 0, 0);
  },
  // Don't forget to remove the ghost DOM object when done dragging
  onEnd: function () {
    dragGhost.parentNode.removeChild(dragGhost);
  }
});



var hiddenDragGhostList = new Sortable(document.getElementById('hidden-drag-ghost-list'), {
  // Just for appearance
  animation: 150,
  
  setData: function (dataTransfer, dragEl) {
    // Create the clone (with content)
    dragGhost = dragEl.cloneNode(true);
    // Stylize it
    dragGhost.classList.add('hidden-drag-ghost');
    // Place it into the DOM tree
    document.body.appendChild(dragGhost);
    // Set the new stylized "drag image" of the dragged element
    dataTransfer.setDragImage(dragGhost, 0, 0);
  },
  // Don't forget to remove the ghost DOM object when done dragging
  onEnd: function () {
    dragGhost.parentNode.removeChild(dragGhost);
  }
});