JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<div id="el1" class="container container1">
<div class="ul" data-id="1">Test 1</div><div class="ul" data-id="2">Test 2</div><div class="ul bg-green" data-id="50">Test 3</div><div class="ul bg-green" data-id="60">Test 3b</div><div class="ul bg-blue" data-id="3">Test 4</div></div>
<hr>

<div style="background: purple;">
  <div id="el2" class="container container2">
    <div class="ul" data-id="3">Test 5</div><div class="ul bg-pink" data-id="2">Test 6</div><div class="ul bg-danger" data-id="40">Test 7</div><div class="ul bg-blue" data-id="12">Test 12</div><div class="ul bg-green" data-id="1">Test 8</div><div class="ul" data-id="10">Test 9</div><div class="ul" data-id="11">Test 9b
   </div>
  </div>
</div>

CSS

body, html {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  margin: 0;
  padding: 0;
}

.container2 {
  display: none;
}

.ul {
  background: #999;
  height: 100px;
  margin-bottom: 0;
  display: inline-block;
  width: 300px;
  margin: 5px;
  font-size: 20px;
  padding: 5px;
  transition: backgroundColor 1s ease;
}

.bg-danger {
  background: red;
  
}

.bg-pink {
  background: pink;
}

.bg-green {
  background: green;
}

.bg-blue {
  background: blue;
}


.adding, .remove {
  height: 0px;
  margin: 0;
  padding: 0;
}

JavaScript

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


const updateElCompare = function(originalEls, newEls, settings={}) {
	
  const originalChildren = Array.from(originalEls.children);
  const newChildren = Array.from(newEls.children);
  
  const originalIds = Array.from(originalChildren).map(el => el.getAttribute('data-id'));
  const newIds = Array.from(newChildren).map(el => el.getAttribute('data-id'));
  const actions = Array(newIds.length).fill('swap');
  
  let removalsAdded = 0;
  
  for (let i=0, l=originalChildren.length; i < l; i++) {
    
    const index = newIds.indexOf(originalIds[i]);
    const id = newIds[index];
    
  	if (index !== -1) {
    	//Updates...
      //const c = window.getComputedStyle(originalChildren[i]);//originalChildren[i].style.backgroundColor;
     	originalChildren[i].replaceWith(newChildren[index]);
      //newChildren[index].style.background = c.backgroundColor;
      //console.log(c.backgroundColor);
      
    } else {
    	//Removals...
      actions.splice(i, 0, 'remove');
      removalsAdded++;
      newIds.splice(i, 0, originalIds[i]);
    }
  }
  
  //Add new
  for (let i=0, l=newChildren.length; i < l; i++) {
    
    if (!originalIds.includes(newIds[i + removalsAdded])) {
      actions[i + removalsAdded] = 'add';
    }
  }
	
  const updatedChildren = Array.from(originalEls.children);
  
  setTimeout(() => {
  	for (let i=0, l=updatedChildren.length; i < l; i++) {
    	//updatedChildren[i].style.backgroundColor = null;
    }
  }, 10);
  
  console.log(newIds, actions);

  swapOrders([...updatedChildren, ...newChildren], newIds, actions, null, originalEls, settings);
};



const swapOrders = function(els, newOrder=[], actions=[], elBounds=[], parentEl=null, settings={}) {
	
  const {removeEasing, addEasing, swapEasing, duration} = settings;
  
  const currentOrder = els.map(el => el.getAttribute('data-id'));
  
  if (!parentEl) parentEl = els[0].parentElement;
  
  if...