JSFiddle - React, Tailwind, and code Playground

by Bhavdip Talaviya

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h1 class="panel-title">Panel 1</h1>
        </div>
        <div id="container1" class="panel-body box-container">
          <div itemid="itm-1" class="btn btn-default box-item">Item 1 <span class="delItem pull-right btn btn-xs btn-danger">X</span><span class="delItem pull-right btn btn-xs btn-danger">X</span><span class="delItem pull-right btn btn-xs btn-danger">X</span><span class="delItem pull-right btn btn-xs btn-danger">X</span></div>
          <div itemid="itm-2" class="btn btn-default box-item">Item 2 <span class="delItem pull-right btn btn-xs btn-danger">X</span></div>
          <div itemid="itm-3" class="btn btn-default box-item">Item 3 <span class="delItem pull-right btn btn-xs btn-danger">X</span></div>
          <div itemid="itm-4" class="btn btn-default box-item">Item 4 <span class="delItem pull-right btn btn-xs btn-danger">X</span></div>
          <div itemid="itm-5" class="btn btn-default box-item">Item 5 <span class="delItem pull-right btn btn-xs btn-danger">X</span></div>
        </div>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h1 class="panel-title">Panel 2</h1>
        </div>
        <div id="container2" class="panel-body box-container"></div>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h1 class="panel-title">Panel 3</h1>
        </div>
        <div...

CSS

.box-container {
  height: 200px;
}

.box-item {
  width: 100%;
  z-index: 1000
}

#container1>div>span.delItem,
#container2>div>span.delItem,


#container2>div:hover>span.delItem,
#container3>div:hover>span.delItem {
  display: block;
}

JavaScript

$(document).ready(function() {

  $('.box-item').draggable({
    cursor: 'move',
    helper: "clone"
  });

  $("#container1").droppable({
    drop: function(event, ui) {
      var itemid = $(event.originalEvent.toElement).attr("itemid");
      $('.box-item').each(function() {
        if ($(this).attr("itemid") === itemid) {
          $(this).appendTo("#container1");
        }
      });
    }
  });

  $("#container2").droppable({
    drop: function(event, ui) {
      var itemid = $(event.originalEvent.toElement).attr("itemid");
      var c2Data = $($('#container2')[0].children);
      var Isexist = 0;
      if (c2Data.length > 0) {
        $(c2Data).each(function() {
          if ($(this).attr("itemid") === itemid) {
            Isexist = 1;
          }
        });
      }
      if (Isexist == 0) {
        $('.box-item').each(function() {
          if ($(this).attr("itemid") === itemid) {
            var a = $(this).clone();
            a.appendTo("#container1");
            a.appendTo("#container2");
            $(".ui-draggable-dragging").remove();
            // $(this).appendTo("#container2");
            return false;
          }
        });
      }
    }
  }).sortable({
    revert: true,
    scroll: false,
    //placeholder: "sortable-placeholder",
    cursor: "move"
  });

  $("#container3").droppable({

    drop: function(event, ui) {
      var itemid = $(event.originalEvent.toElement).attr("itemid");
      $('.box-item').each(function() {
        if ($(this).attr("itemid") === itemid) {
          var b = $(this).clone();
          b.prependTo("#container1");
          b.prependTo("#container3");
          $(".ui-draggable-dragging").remove();
          // $(this).appendTo("#container2");
          return false;
        }
      });
    }
  });
});

$(document).on('click', '.delItem', function() {
  $(this).parent('div').remove();
});