Here is the code snippet I am working with:
/* Coded by @fitri
This ReactJS project component was created with love
https://codepen.io/fitri/full/oWovYj/ */
function enableDragSort(listClass) {
const sortableLists = document.getElementsByClassName(listClass);
Array.prototype.map.call(sortableLists, (list) => {enableDragList(list)});
}
function enableDragList(list) {
Array.prototype.map.call(list.children, (item) => {enableDragItem(item)});
}
function enableDragItem(item) {
item.setAttribute('draggable', true)
item.ondrag = handleDrag;
item.ondragend = handleDrop;
}
function handleDrag(item) {
const selectedItem = item.target,
list = selectedItem.parentNode,
x = event.clientX,
y = event.clientY;
selectedItem.classList.add('drag-sort-active');
let swapItem = document.elementFromPoint(x, y) === null ? selectedItem : document.elementFromPoint(x, y);
if (list === swapItem.parentNode) {
swapItem = swapItem !== selectedItem.nextSibling ? swapItem : swapItem.nextSibling;
list.insertBefore(selectedItem, swapItem);
}
}
function handleDrop(item) {
item.target.classList.remove('drag-sort-active');
}
(()=> {enableDragSort('drag-sort-enable')})();html,
body {
height: 100%;
}
.container {
margin: 20px auto 0;
max-width: 500px;
word-wrap:break-word
}
* {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
}
li {
margin: 5px 0;
padding: 0 20px;
height: 40px;
line-height: 40px;
border-radius: 3px;
background: #136a8a;
background: -webkit-linear-gradient(to right, #267871, #136a8a);
background: linear-gradient(to right, #267871, #136a8a);
color: #fff;
list-style: none;
}
li.drag-sort-active {
background: transparent;
color: transparent;
border: 1px solid #4ca1af;
}
span.drag-sort-active {
background: transparent;
color: transparent;
}<div class="container">
<h3>Drag and Sort :</h3>
<div class="drag-sort-enable">
</div>
<hr>
<ul class="drag-sort-enable">
<li>Application</li>
<li>Blank</li>
<li>Class</li>
<li>Data</li>
<li>Element</li>
</ul>
</div>Is there a way to add animation to the drag-and-drop feature so that when an item is dragged over another, it smoothly moves aside to make space? If not, how can this be achieved through CSS or JS code?
Any suggestions would be greatly appreciated! Thanks in advance!