JSFiddle - React, Tailwind, and code Playground

by manikathuria2001

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="./styles.css">
    <title>Document</title>
</head>
<body>
   <div class="container">
       <table id="table1" cellspacing="0" cellpadding="0">
           <tr class="columns">
            <td class="block">
                <div class="card box1" draggable="true">100</div>
            </td>
            <td class="block">
                <div class="card box2" draggable="true">200</div>
            </td>
            <td class="block">
                <div class="card box3" draggable="true">300</div>
            </td>
           </tr>
           <tr class="columns">
            <td class="block">
                <div class="card box4" draggable="true">400</div>
            </td>
            <td class="block">
                <div class="card box5" draggable="true">500</div>
            </td>
            <td class="block">
                <div class="card box6" draggable="true">600</div>
            </td>
           </tr>
           <tr class="columns">
            <td class="block">
                <div class="card box7" draggable="true">700</div>
            </td>
            <td class="block">
                <div class="card box8" draggable="true">800</div>
            </td>
            <td class="block">
                <div class="card box9" draggable="true">900</div>
            </td>
           </tr>
       </table>
   </div>
    


    <script src="./index.js"></script>
</body>
</html>

CSS

.container{
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    text-align: center;
}
#table1{
  width: 100%;
  height: 50%;
}
  #table1 , .block{
    border: 1px solid black;
    border-collapse: collapse;
}

.block{
    padding: 30px !important;
    margin: 100px !important;
    /* min-width: 200px !important;
    min-height: 400px !important; */
}
  .card {
    width: 100px;
    height: 60px;
    border-radius: 25px;
    /* display: inline-block; */
    /* margin-right: 1.2%; */
    box-sizing: border-box;
    font-size: larger;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    text-align: center;
    z-index: 100;
  }
  .card.dragging {
    opacity: 0.5;
  }
  .card.over {
    border: 3px dashed #000;
  }
.box1 {  background-color: #E74C3C; }
.box2 {  background-color: #8E44AD; }
.box3 {  background-color: #5DADE2; }
.box4 {  background-color: #1ABC9C; }
.box5 {  background-color: #F1C40F; }
.box6 {  background-color: #F39C12; }
.box7 {  background-color: #34495E; }
.box8 {  background-color: #FF00FF; }
.box9 {  background-color: #008080; }
  [draggable] {
    user-select: none;
  }

JavaScript

var columns = document.querySelectorAll('.card');
var draggingClass = 'dragging';
var dragSource;

Array.prototype.forEach.call(columns, 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);
});

function handleDragStart (evt) {
  dragSource = this;
  evt.target.classList.add(draggingClass);
  evt.dataTransfer.effectAllowed = 'move';
  evt.dataTransfer.setData('text/html', this.innerHTML);
  this.css('zIndex',100)
  evt.dataTransfer.setData('offset', this.offset());
  evt.dataTransfer.setData('classes',this.classList)
}

function handleDragOver (evt) {
  evt.dataTransfer.dropEffect = 'move';
  evt.preventDefault();
}

function handleDragEnter (evt) {
  this.classList.add('over');
}

function handleDragLeave (evt) {
  this.classList.remove('over');
}

function handleDrop (evt) {
  evt.stopPropagation();
  
  if (dragSource !== this) {
   $(this).swap($(dragSource),300); 
  }
  evt.preventDefault();
}

function handleDragEnd (evt) {
  Array.prototype.forEach.call(columns, function (col) {
    ['over', 'dragging'].forEach(function (className) {
      col.classList.remove(className);
    });
  });
}


(function( $ ){
    $.fn.swap = function(other,speed) {

     
        //get the position
        var position1 = this.offset();
        var position2 = other.offset();

        //position this where it is
        this.css({
            top: position1.top + 'px',
            left: position1.left + 'px',
            position: 'absolute'
        });

        //position the other element where it is
        other.css({
            top: position2.top + 'px',
            left: position2.left + 'px',
            position: 'absolute'
        });

        this.animate({
 ...