JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<link rel="stylesheet" href="https://howdoweb.com/themes/blocks-v1/css/style.css">
<div id="testEl" class="row"></div>


<div id="grid1" class="row">
  <div class="col col-3">
    <div class="item" data-id="1"><img src="http://placeimg.com/350/480/any"></div>
    <div class="item" data-id="2"><img src="http://placeimg.com/640/480/any"></div>
    <div class="item" data-id="3"><img src="http://placeimg.com/300/600/any"></div>
    <div class="item" data-id="4"><img src="http://placeimg.com/640/480/any"></div>
    <div class="item" data-id="5"><img src="http://placeimg.com/350/480/any"></div>
    <div class="item" data-id="6"><img src="http://placeimg.com/640/480/any"></div>
   </div>
  <div class="col col-3">
    <div class="item" data-id="7"><img src="http://placeimg.com/300/600/any"></div>
    <div class="item" data-id="8"><img src="http://placeimg.com/640/480/any"></div>
    <div class="item" data-id="9"><img src="http://placeimg.com/500/250/any"></div>
    <div class="item" data-id="10"><img src="http://placeimg.com/320/240/any"></div>
    <div class="item" data-id="11"><img src="http://placeimg.com/480/640/any"></div>
    <div class="item" data-id="12"><img src="http://placeimg.com/650/480/any"></div>
  </div>
  <div class="col col-3">
    <div class="item" data-id="13"><img src="http://placeimg.com/300/500/any"></div>
    <div class="item" data-id="14"><img src="http://placeimg.com/520/250/any"></div>
    <div class="item" data-id="15"><img src="http://placeimg.com/640/480/any"></div>
    <div class="item" data-id="16"><img src="http://placeimg.com/850/400/any"></div>
    <div class="item" data-id="17"><img src="http://placeimg.com/350/350/any"></div>
    <div class="item" data-id="18"><img src="http://placeimg.com/500/250/any"></div>
  </div>
  <div class="col col-3">
    <div class="item" data-id="19"><img src="http://placeimg.com/320/240/any"></div>
    <div class="item" data-id="20"><img src="http://placeimg.com/480/640/any"></div>
    <div class="item"...

SCSS

.item {
  margin-bottom: 20px;
}

img {
  height: auto;
  width: 100%;
}

JavaScript

const arrayMoveIndex = function(arr, from, to) {
	return arr.splice(to, 0, arr.splice(from, 1)[0]);
};

const forceArray = function (value) {
    if (Array.isArray(value)) return value;
    return [value];
};

const swapOrders = function(els, newOrder=[], actions=[], elBounds=[], parentEl=null, settings={}) {
	
  const {removeEasing, addEasing, swapEasing, duration, afterRemove} = settings;
  
  const currentOrder = els.map(el => el.getAttribute('data-id'));
  
  if (!parentEl) parentEl = els[0].parentElement;
  
  if (!elBounds || elBounds.length !== els.length) {
  	elBounds = Array(els.length).fill({});
    
    //Get current element bounds...
  	for (let i=0, l=newOrder.length; i < l; i++) {
    	
    	let id = newOrder[i];
      const index = currentOrder.indexOf(id);
      if (index === -1) continue;
      
      elBounds[index] = els[index].getBoundingClientRect();
      
    }
    
  }
  
  
  for (let i=0, l=newOrder.length; i < l; i++) {
  	
    const id = newOrder[i];
    let index = currentOrder.indexOf(id);
    let newIndex = i;
    if (!elBounds[index]) continue; //Skip if already in the correct index or ID not found
    const action = actions?.[i];
    
    let el= els[index];
    
    let pEl = parentEl;
    if (Array.isArray(parentEl)) {
    	pEl = parentEl[randomIntFromInterval(0, parentEl.length-1)];
    }
    
    if (action === 'add') {
    	el = pEl.insertBefore(el, pEl.children[i]);
    	animateAdd(el, el.getBoundingClientRect(), elBounds[index], duration, addEasing);
      
    } else if (action === 'remove') {
    
      //Move to the end...
      pEl.append(el);
			animateRemove(el, elBounds[index], duration, removeEasing, afterRemove);
      newIndex = newOrder.length;
      
    } else {
    	
    	if (index !== i) {
   			//Move element to index
        el = pEl.insertBefore(el, pEl.children[i]);
      }
      //Animate the movement
    	animateSwap(el, el.getBoundingClientRect(), elBounds[index], duration, swapEasing);
    
    }
   ...