JSFiddle - React, Tailwind, and code Playground

by ChanHyuk Im

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="row well">
  <button class="btn btn-primary" id="btnAddDropZone">Add dropZone</button>
</div>
<div id="dropZones">
  <div class='flakUp' id="1">DropZone 1</div>
</div>
<hr>
<div class="elementsDiv" id="1" style="width: 200px; height: 25px; background-color: #c2c2d6; cursor: move">Drag me 1</div>
<div class="elementsDiv" id="2" style="width: 150px; height: 35px; background-color: #c2c2d6; cursor: move">Drag me 2</div>
<div class="elementsDiv" id="3" style="width: 160px; height: 35px; background-color: #c2c2d6; cursor: move">Drag me 3</div>

CSS

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .3);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .3);
}

.lastordningMainDiv {
  width: 1205px;
  margin: auto;
}

#flakDiv {
  float: left;
  margin-right: 50px;
  width: 650px;
  height: 600px;
  max-height: 600px;
  border: 1px solid black;
}

#elementDiv {
  //float: left;
  width: 500px;
  height: 600px;
  max-height: 600px;
  border: 1px solid graytext;
  padding-left: 5px;
  overflow-y: auto;
}

#elementListDiv {
  margin-left: 5px;
  height: 490px;
  max-height: 490px;
}

#selectObjNr {
  width: 200px;
}

.elementsDiv {
  box-shadow: 0 0 0 1px white inset;
  cursor: move;
}

.elementsDiv.ui-draggable-dragging {
  background-color: red;
}

.thisFlak {
  width: 600px;
  height: 270px;
  padding: 0 !important;
  margin: 0 !important;
}

.flakUp {
  width: 600px;
  height: 100px;
  border: solid 1px black;
}

.flakMiddle {
  width: 600px;
  height: 50px;
  border: solid 1px black;
  background-color: #ffe6e6;
}

.flakCount {
  font-weight: bold;
}

.flakDown {
  width: 600px;
  height: 100px;
  border: solid 1px black;
}

.deleteFlakBtn {
  color: #ffe6e6;
  margin: -12px;
  margin-bottom: 12px;
}

.deleteFlakBtn:hover {
  cursor: pointer;
  color: red;
}

#addFlakBtn {
  display: none;
  margin-bottom: 20px;
}

JavaScript

//Make elements Draggable
$('.elementsDiv').draggable({
  revert: 'invalid',
});
var flakUpId = $('#1').attr('id');

$('#btnAddDropZone').on('click', function() {
  flakUpId++;
  var flakUp = "<div class='flakUp'>DropZone " + flakUpId + " </div>";
  $('#dropZones').prepend(flakUp);
  
  registDroppable();
  
  $(".flakUp .elementsDiv").each(function(e) {
  	$(this).css({"top": $(this).offset().top+$(".flakUp").height()});
  });
})

function registDroppable() {
	$('.flakUp, .flakDown').droppable({
    accept: '.elementsDiv',
    drop: function(event, ui) {
      var droppable = $(this);
      var draggable = ui.draggable;
      // Move draggable into droppable

      draggable.css({
        "left": ui.offset.left,
        "top": ui.offset.top,
        "position": "absolute"
      }).appendTo(droppable);
    },
  });
}
registDroppable();