JSFiddle - React, Tailwind, and code Playground

by victor wang

HTML

<body>
<div class="container">
    <div class="grid pin" draggable="true">0</div>
    <div class="grid" draggable="true">1</div>
    <div class="grid" draggable="true">2</div>
    <div class="grid" draggable="true">3</div>
    <div class="grid" draggable="true">4</div>
    <div class="grid" draggable="true">5</div>
    <div class="grid" draggable="true">6</div>
    <div class="grid" draggable="true">7</div>
    <div class="grid" draggable="true">8</div>
    <div class="grid" draggable="true">9</div>
    <div class="grid" draggable="true">10</div>
    <div class="grid" draggable="true">11</div>
    <div class="grid" draggable="true">12</div>
    <div class="grid" draggable="true">13</div>
    <div class="grid" draggable="true">14</div>
    <div class="grid" draggable="true">15</div>
</div>
</div>

CSS

.container {
        width:600px;
        height: 550px;
        /*position:fixed;*/
        /*background:#CCC;*/
        padding:10px 0 10px;
}
.grid {
        float:left;
        margin:0 10px 10px 0;
        border:1px solid #333;
        background:#3E9;
        width:128px;
        height:128px;
        font-weight:bold;
        text-align:center;
        line-height:128px;
        /*list-style-type: none;*/
}
.grid.over {
  border: 2px dashed #000;
}

JavaScript

var dragSrcEl = null;
function handleDragStart(e) {
  this.style.opacity = '0.1';  // this / e.target is the source node.
  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.
  this.classList.add('over');
}

function handleDragLeave(e) {
  this.classList.remove('over');  // this / e.target is previous target element.
}

function handleDrop(e) {
  // this / e.target is current target element.

  if (e.stopPropagation) {
    e.stopPropagation(); // stops the browser from redirecting.
  }
  if (dragSrcEl != this) {
    // Set the source column's HTML to the HTML of the column we dropped on.
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
  }

  return false;
}

function handleDragEnd(e) {
  // this/e.target is the source node.

  [].forEach.call(cols, function (col) {
    col.classList.remove('over');
  });
}

var cols = document.querySelectorAll('.container .grid');
[].forEach.call(cols, function(col) {
  col.addEventListener('dragstart', handleDragStart, false);
  col.addEventListener('dragenter', handleDragEnter, false);
  col.addEventListener('dragover', handleDragOver, false);
  col.addEventListener('dragleave', handleDragLeave, false);
  col.addEventListener('drop', handleDrop, false);
  col.addEventListener('dragend', handleDragEnd, false);
});