JSFiddle - React, Tailwind, and code Playground

by Marcelo Leiva

HTML

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <button type="button" class="btn btn-default add-container">Add Drop container</button>
    </br>
      <ul class="list-unstyled" id="draggable">
        <li>
          <div class="row">
            <div class="col-xs-6 col-md-4">
              <img name="SELECT" src="http://s13.postimg.org/j0qxzty7n/select.png"/>
            </div>
            <div class="col-xs-6 col-md-4 options"></div>
          </div>
        </li>
        <li>
          <div class="row">
            <div class="col-xs-6 col-md-4">
              <img name="INPUT" src="http://s30.postimg.org/x7f311jv1/input.png" />
            </div>
            <div class="col-xs-6 col-md-4 options"></div>
          </div>
        </li>
        <li>
          <div class="row">
            <div class="col-xs-6 col-md-4">
              <img name="DATE" src="http://s24.postimg.org/cylp3nzkx/date.png"/>
            </div>
            <div class="col-xs-6 col-md-4 options"></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="col-md-6 containers">
      Drop container
      <ul class="sortable"></ul>
    </div>
  </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.container{
	margin-top: 20px;
}

.sortable {
    border: 1px solid black;
    min-width: 100px;
    min-height: 100px;
    list-style: none
}

.sortable li {
	padding: 5px;
}

#draggable li {
    padding-top: 10px;
    padding-bottom: 5px;
}

JavaScript

$(function() {

          $(':button.add-container').on('click', function(event){
              var ul = $('<ul></ul>');
              var container = $('div.containers');
              $(container).append(ul.attr('class', 'sortable'));
              ul.sortable({
                  revert: true,
                  containment: ul,
                  opacity: 0.6,
                  tolerance: 'pointer',
              }).disableSelection();
          });

          $( "#draggable li" ).draggable({
              connectToSortable: ".sortable",
              helper: "clone",
              revert: "invalid"
          }).disableSelection();

          $( ".sortable" ).sortable({
              revert: false,
              containment: ".sortable",
              opacity: 0.4,
              tolerance: 'pointer',
          }).disableSelection();
      });