JSFiddle - React, Tailwind, and code Playground

by flackend

HTML

<div class="container">
  <div class="column">
    <h2>My Team:</h2>
    <div id=sortcard class="dropbox"></div>
    <div id=add-friend>Image of check</div>
    <div id=dropbox-one class="dropbox"></div>
    <div id=dropbox-two class="dropbox"></div>
  </div><!-- div.column -->
  <div class="column">
    <h2>Best Available:</h2>
    <div class="sorting dropbox">
      Jeremy Lin<br>
      98<br>
      Will take the Rockets as far as Harden lets him
    </div>
  </div><!-- div.column -->
</div><!-- div.container -->

CSS

div.container {
  width: 720px;
}

.column {
  float: left;
  margin-right: 20px;
}

div.dropbox,
div#add-friend {
  margin-bottom: 20px
}

h2 {
    font-size:145%;
    font-family: Georgia;
}

div.dropbox {
    border: solid 1px #48B1D9;
    width:320px;
    height:85px;
    padding: 8px;
    overflow: scroll;
}

div#add-friend { display:none }

JavaScript

$(function() {

    $('div.sorting').draggable({
        revert: true,
        containment: 'window',
        cursor: 'pointer'
    });

    $('div.sorting').sortable({
        cursor: 'pointer',
        tolerance: 'pointer',
        scroll: false,
        revert: true
    });

    $('div.dropbox').droppable({
        accept: '.sorting',
        hoverClass: 'border',
        tolerance: 'touch',
        drop: function(e, ui) {

            $(this).append(ui.draggable.html() + '<br>');

            $("div#add-friend").show().fadeTo(12000, 0);
            $(e.target).droppable("disable")
                       .append('<input type="button" name="Sub" value="clear">').click(function() {
                $(this).empty().droppable('enable');
            });

            if ($('div#dropbox-one').is(':empty') &&
                $('div#dropbox-two').is(':empty'))
            {
                $.post('/echo/json/', {
                    json: JSON.stringify({
                        sortcard: $('div#sortcard').text(),
                        dropboxone: $('div#dropbox-one').text(),
                        dropboxtwo: $('div#dropbox-two').text()
                    })
                }, function(data) {
                    $('div.sorting').html(data);
                });
            }
        }
    });
});