JSFiddle - React, Tailwind, and code Playground

by evgkch

HTML

<div id="rows">
</div>

CSS

/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
.folder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin-bottom: 5px;
  border: 2px solid #666666;
  background-color: #ccc;
  cursor: move;
}

.folder.over {
  background-color: #0071f4;
}

.folder.hidden {
  opacity: 0.1 !important;
}

JavaScript

function createFolder(parendID, id){
	return { parendID, id };
}
const folders = [
	createFolder(null, 1),
  createFolder(1, 2),
  createFolder(1, 3),
  createFolder(2, 4),
];

function parseFolders(folders){
	const buffer = {};
  folders.forEach(folder=>{
  	buffer[folder.id] = folder;
  });
  return buffer;
}

/* class Node {
  constructor(id){
    this.id = id;
    this.children = [];
  }
  apeendChild(child){
    this.children.push(child);
  }
  removeChild(child){

  }
} */

class Node {
	static get class(){ return 'folder'; }
	static swap(source, target){
  	if ((source != target))
    {
    	const buffer = source.parentNode.removeChild(source);
      target.appendChild(buffer);
    }
  }
}

class Folder {
	static create(target, name){
  	const folder = document.createElement('div');
    folder.className = 'folder';
    folder.draggable = true;
    folder.innerHTML = name;
  	target.appendChild(folder);
  }
  static copy(source){
  	return source.cloneNode(true);
  }
  static remove(source){
  	source.parentNode.removeChild(source);
  }
  static swap(source, target){
  	if (source.parentNode.className == 'folder' &&
    	target.parentNode.className == 'folder')
    {
    	const buffer = source;
    	source.parentNode.removeChild(source);
      target.appendChild(buffer);
    }  	
  }
}

var dragSrcEl = null;

function handleDragStart(e) {
	e.stopPropagation();
  if (this.parentNode.className == 'folder')
  {
   // Target (this) element is the source node.
  this.style.opacity = 1;

  dragSrcEl = this;

  e.dataTransfer.effectAllowed = 'move';
  // e.dataTransfer.setData('text/html', this.innerHTML);
  }
 
}

function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }

  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

  return false;
}

function handleDragEnter(e) {
  // this / e.target is the current hover target.
  if (this == dragSrcEl)
 ...