JSFiddle - React, Tailwind, and code Playground

by zoe chen

HTML

<div class="left-panel">
</div>
<div class="right-panel">
</div>

CSS

body {
  padding: 0;
  margin: 0;
}

.left-panel,
.right-panel {
  border: 1px solid #ccc;
  background: #eee;
  display: inline-block;
  margin-right: 70px;
  float: left;
}

ul {
  list-style: none;
  padding: 10px;
  margin: 0;
}

ul>li {
  border: 1px #aaa dashed;
  padding: 4px;
  margin: 4px;
  cursor: move;
}

li.dragover {
  margin-bottom: 30px;
}

JavaScript

var items = {
	'left-panel': [],
  'right-panel': []
};

function initPanel(leftPanel, rightPanel){
	var leftPanelItems = '';
  var rightPanelItems = '';
  for(var i = 0; i < 5; i++){
		items['left-panel'].push(`Left Items${i}`)
		items['right-panel'].push(`Right Items${i}`)
    leftPanelItems += `<li draggable = "true">${items['left-panel'][i]}</li>`
    rightPanelItems += `<li draggable = "true">${items['right-panel'][i]}</li>`
  }
  leftPanel.innerHTML += `<ul>${leftPanelItems}</ul>`
  rightPanel.innerHTML += `<ul>${rightPanelItems}</ul>`
}

function append(element, currElement){
	var nodeName = currElement.nodeName.toLowerCase()
	console.log(nodeName,element,currElement)
  if(nodeName === 'li') currElement.parentNode.insertBefore(element, currElement.nextSibling)
  else if (nodeName === 'ul') currElement.appendChild(element)
}

function switchItem(prevArr, currArr, prevIndex, currIndex){
		console.log(prevArr,currArr,prevIndex,currIndex)
		var item = prevArr[prevIndex]
    prevArr.splice(prevIndex,1)
    currArr.splice(currIndex,0,item)
}

function dragRegister(panelDOM){
	panelDOM.addEventListener('drag',function(e){
    if(e.target.nodeName.toLowerCase() === 'li') console.log('drag')
  })
		  
  panelDOM.addEventListener('dragstart',function(e){
    if(e.target.nodeName.toLowerCase() === 'li'){
			var panelItems = panelDOM.querySelectorAll('li')
      e.dataTransfer.setData('DOM',[].indexOf.call(panelItems, e.target))
      e.dataTransfer.setData("panel",panelDOM.className)
    }
  })
  
  panelDOM.addEventListener('dragover', function(e){
		e.preventDefault()
	})
  
  panelDOM.addEventListener('dragenter', function(e){
		if(e.target.nodeName.toLowerCase() === 'li'){
			e.target.classList.add('dragover')
    }
	})
  
  panelDOM.addEventListener('dragleave', function(e){
  	if(e.target.nodeName.toLowerCase() === 'li'){
			e.target.classList.remove('dragover')
    }
  })
  
  panelDOM.addEventListener('drop', function(e){
		var index =...