JSFiddle - React, Tailwind, and code Playground
HTML
<p>While dragging an item without pressing Ctrl or Alt, the item will be
visually removed from the list before the drag starts. However, if Ctrl
or Alt is pressed, the dragged item will not be removed visually from the
list</p>
<br/>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
</div>
<br/><p><font size="3"><b>Source for this<a target="_blank"href="http://jqfaq.com/how-to-make-jqueryui-sortable-to-clone-items-using-alt-or-ctrl-keys-and-dont-clone-without-it/"</a> JQFaq Question</b></font></p>
<iframe id="iframe1" src="http://jqfaq.com/AdPage.html" style="width:100%; height:115px; border:none;"
/>
CSS
.item {
height:20px;
width:200px;
border:1px solid gray;
display:block !important;
}
JavaScript
//While dragging an item without pressing Ctrl or Alt, the item will be visually removed from the list before the drag starts. However, if Ctrl or Alt is pressed, the dragged item will not be removed visually from the list.
$(".item").mousedown(function (event) {
var ctrl = event.ctrlKey || event.altKey;
if (ctrl) {
$(".container").sortable("option", "helper", 'clone');
} else {
$(".container").sortable("option", "helper", 'original');
}
});
$(".container").sortable();