JSFiddle - React, Tailwind, and code Playground

by Berryllion

HTML

<script src="https://cdn.rawgit.com/dbunic/REDIPS_drag/master/redips-drag-min.js"></script>
<a href="http://www.redips.net/javascript/drag-and-drop-table-content/" target="_new">REDIPS.drag</a>
<br/>
<br/>

<!-- drag container -->
<div id="redips-drag">
    <!-- table2 -->
    <table id="table2">
        <colgroup>
            <col width="100"/>
            <col width="100"/>
            <col width="100"/>
            <col width="100"/>
        </colgroup>
        <tbody>
            <tr>
              <td>
                <div id="a" class="redips-drag">
                  <a href="https://google.com">
                    <img src="http://www.dictionary.com/e/wp-content/uploads/2016/01/olive-green-color-paint-code-swatch-chart-rgb-html-hex.png" class="image">
                  </a>
                </div>
              </td>
              <td>
                <div id="b" class="redips-drag">
                  <a href="https://workspace.infomaniak.com">
                    <img src="http://www.dictionary.com/e/wp-content/uploads/2016/01/570d2dfb1774154eebc8df6c228e38f1-chartreuse-bedroom-chartreuse-decor-1.jpg" class="image">
                  </a>
                </div>
              </td>
              <td>
                <div class="redips-drag" id="slack" style="border-style: none; cursor: move;">
                  <a href="http://slack.com">
                    <img src="http://www.dictionary.com/e/wp-content/uploads/2016/01/myrtle.jpg" class="image">
                  </a>
                </div>
              </td>
              <td>
                <div class="redips-drag" id="trello" style="border-style: none; cursor: move;">
                  <a href="http://trello.com">
                    <img src="http://wordpress-blog-assets-production.s3.amazonaws.com/e/wp-content/uploads/2016/01/mint.gif" class="image">
                  </a>
                </div>
              </td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.image {
  width: 100%;
  height: 100%;
}

/* drag objects (DIV inside table cells) */
.redips-drag {
    cursor: move;
    margin: auto;
    background-color: white;
    text-align: center;
    font-size: 25pt; /* needed for cloned object */
    width: 87px;
    height: 35px;
    line-height: 35px;
    /* round corners */
    border-radius: 4px; /* Opera, Chrome */
    -moz-border-radius: 4px; /* FF */
}

/* tables */
div#redips-drag table {
    background-color: #eee;
    border-collapse: collapse;
    margin: 10px;
}

/* table cells */
div#redips-drag td {
    border: 1px #DDC5B5 solid;
    height: 50px;
    text-align: center;
    font-size: 10pt;
    padding: 2px;
}

/* green objects */
.green {
    border: 2px solid #499B33;
}

/* orange objects */
.orange {
    border: 2px solid #BF6A30;
}

/* message line */
#message {
    color: white;
    background-color: #aaa;
    text-align: center;
    margin-top: 10px;
}

/* trash cell */
.redips-trash {
    color: white;
    background-color: SteelBlue;
}

body {
    font-family: arial;
}

JavaScript

// create container needed for methods below
var redips = {};

// initialization
redips.init = function () {
    // reference to the REDIPS.drag library
    var rd = REDIPS.drag;
    // initialization
    rd.init();
    // set hover color
    rd.hover.colorTd = '#9BB3DA';
    rd.dropMode = "switch";
    // event handler invoked before DIV element is dropped to the cell
   /* rd.event.droppedBefore = function (targetCell) {
        // test if target cell is occupied and set reference to the dragged DIV element
        var empty = rd.emptyCell(targetCell, 'test'),
            obj = rd.obj;
        // if target cell is not empty
        if (!empty) {
            // confirm question should be wrapped in setTimeout because of
            // removeChild and return false below
            setTimeout(function () {
                // ask user if he wants to overwrite TD (cell is already occupied)
                if (confirm('Overwrite content?')) {
                    rd.emptyCell(targetCell);
                }
                // append previously removed DIV to the target cell
                targetCell.appendChild(obj);
            }, 50);
            // remove dragged DIV from from DOM (node still exists in memory)
            obj.parentNode.removeChild(obj);
            // return false (deleted DIV will not be returned to source cell)
            return false;
        }
    };*/
}


// add onload event listener
if (window.addEventListener) {
    window.addEventListener('load', redips.init, false);
}
else if (window.attachEvent) {
    window.attachEvent('onload', redips.init);
}