JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="container-draggs col-xs-3">
      <div class="draggable block-1 col-xs-12 col-md-6">1</div>
      <div class="draggable block-2 col-xs-12 col-md-6">2</div>
      <div class="draggable block-3 col-xs-12 col-md-6">3</div>
    </div>
    <div class="droppable col-xs-9"></div>
  </div>
</div>

CSS

.draggable {
  height: 50px;
  background: red;
}

.container-draggs div[class^'=block-']{
  width:50%;
}

.droppable {
  height: 150px;
  background: lightgrey;
}
.container-draggs .block-1 {
    background-color: green;
}

.container-draggs .block-2 {
    background-color: red;
}


.container-draggs .block-3 {
    background-color: blue;
}

JavaScript

$('.draggable').draggable({
  revert: "invalid",
  stack: ".draggable",
  helper: 'clone'
});

$('.droppable').droppable({
  accept: ".draggable",
  drop: function(event, ui) {
    var droppable = $(this);
    var draggable = ui.draggable;
    // Move draggable into droppable
    var drag = $('.droppable').has(ui.draggable).length ? draggable : draggable.clone().draggable({
      revert: "invalid",
      stack: ".draggable",
      helper: 'clone'
    });
    
    draggable.sortable({
      revert: "invalid",
      stack: ".draggable",
      helper: 'clone'
    });
    
    drag.appendTo(droppable);
    draggable.css({
      float: 'left'
    });
  }
});