JSFiddle - React, Tailwind, and code Playground

by wedgwood

HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <style>
      
    </style>
  </head>
  <body>
    <div class="box left J_Left">
      <div class="J_Item from-left"><span>A</span></div>
      <div class="J_Item from-left"><span>A</span></div>
      <div class="J_Item from-left"><span>A</span></div>
      <div class="J_Item from-left"><span>A</span></div>
      <div class="J_Item from-left"><span>A</span></div>
    </div>
    <div class="box right J_Right">
      <div>
        <div class="J_Item from-right">B</div>
        <div class="J_Item from-right">B</div>
        <div class="J_Item from-right">B</div>
        <div class="J_Item from-right">B</div>
        <div class="J_Item from-right">B</div>
      </div>
      <div>
        <div class="J_Item from-right">B</div>
        <div class="J_Item from-right">B</div>
        <div class="J_Item from-right">B</div>
        <div class="J_Item from-right">B</div>
        <div class="J_Item from-right">B</div>
      </div>
      <div>
        <div class="J_Item from-right">B</div>
        <div class="J_Item from-right">B</div>
        <div class="J_Item from-right">B</div>
        <div class="J_Item from-right">B</div>
        <div class="J_Item from-right">B</div>
      </div>
      <div>
        <div class="J_Item from-right">B</div>
        <div class="J_Item from-right">B</div>
        <div class="J_Item from-right">B</div>
        <div class="J_Item from-right">B</div>
        <div class="J_Item from-right">B</div>
      </div>
    </div>
    <div class="box console J_Console">
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script src="./do.js"></script>
  </body>
</html>

CSS

.box {
    border: 1px solid #aaa;
    float: left;
    height: 400px;
    margin-right: 20px;
    padding: 5px;
    overflow: auto;
}

.box > * {
    text-align: center;
    margin-top: 15px;
    width: 60px;
}

.left > .from-left {
    background: #f90;
    line-height: 50px;
    height: 50px;
}

.right {
    overflow: hidden;
}

.right > div {
    border: 1px dotted #aaa;
    width: 400px;
    min-height: 50px;
    padding: 10px;
    overflow: auto;
}

.right .J_Item {
    width: 50px;
    line-height: 45px;
    height: 45px;;
    height: 53px;
    float: left;
    margin-left: 5px;
}

      .right .from-left {
        background: #f90;
      }

      .right .from-right {
        background: #9f0;
      }

      .drag-helper {
        height: 50px;
        line-height: 50px;
        text-align: center;
        width: 50px;
        background: #eee;
        border: 1px solid #ccc;
        overflow: hidden;
      }

      .grey-placeholder {
        height: 50px;
        line-height: 50px;
        width: 50px;
        background: #bbb;
        float: left;
        border: 1px solid #aaa;
        overflow: hidden;
      }

      .box.console {
        width: 100px;
        overflow-y: scroll;
        overflow-x: hidden;
      }

JavaScript

(function() {
    var $console = $('.J_Console');

    $('.J_Left > div').draggable({
        cursor: 'move',
        scroll: false,
        zIndex: 9999,
        helper: function() {
            return $('<div class="drag-helper">drag me</div>');
        },
        forceHelperSize: true,
        refreshPositions: true,
        appendTo: 'body',
        drag: function(e, ui) {
            e.stopPropagation();
        },
        connectToSortable: '.J_Right > div'
    }).mousedown(function() {
        return false;
    }).click(function() {
        return false;
    }).disableSelection();

    $('.J_Right > div').sortable({
        cursor: 'move',
        placeholder: 'grey-placeholder',
        dropOnEmpty: true,
        disabled: false,
        forceHelperSize: true,
        forcePlaceholderSize: true,
        revert: true,
        helper: 'clone',
        connectWith: '.J_Right > div',
        containment: '.J_Right',
        appendTo: '.J_Right',
        items: '.J_Item',
        refreshPositions: true,
        start: function(e, ui) {
            ui.helper.css({
                width: '',
                height: ''
            });
        },
        receive: function(e, ui) {
            var $sender = $(ui.sender),
                text = $console.html();


            if ($sender.parent().hasClass('J_Left')) {
                $console.html(text + '<br />from left');
            } else {
                $console.html(text + '<br />from right');
            }
        }
    }).disableSelection();
}());