JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="myDrag myDraggable" name="box" id="add_box" style="background-color:blue; width:fit-content; ">Drag to add box 
</div>
<a class="btn btn-primary btn-padding" id="add_section" href="#add_section">Add a Section</a>
<div id="bodyContent" style="height: fit-content; min-height:200px; width:850px; border:2px solid black; margin-top:10px;">

</div>

CSS

.droppable-hover {
  background-image: linear-gradient(45deg, #80808033 25%, transparent 25%), linear-gradient(-45deg, #80808033 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #80808033 75%), linear-gradient(-45deg, transparent 75%, #80808033 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.ui-widget-header {
  background: none !important;
}

.box-style {
  height: 75px;
  width: 75px;
  position: absolute !important;
}

.sortable_list:hover {
  border: 1px solid green;
}

.sortable_list {
  border: 1px solid transparent;
}

JavaScript

var elementNumber = 0;

  $(".myDrag").draggable({
    helper: 'clone',
    cursor: 'move',
    revert: true,
    stack: '.myDraggable',
    zIndex: 9999999,
    cursorAt: {
      top: 0,
      left: 0
    },
  });

  var boxDroppableOptions = {
    accept: '.myDraggable',
    greedy: true,
    stack: '.myDraggable',
    tolerance: 'pointer',
    hoverClass: "droppable-hover",
    zIndex: 999999,
    drop(event, ui) {
      if (event.target.id != ui.helper.parent().attr('id')) {
        var leftPosition = event.clientX - $(this).offset().left;
        var topPosition = event.clientY - $(this).offset().top;
        if (ui.helper.attr('name') == 'box') {
          if (ui.helper.attr('id')) {
            $(this).append($('#' + ui.helper.attr('id')));;
            $('#' + ui.helper.attr('id')).css('top', topPosition);
            $('#' + ui.helper.attr('id')).css('left', leftPosition);
          } else {
            addBox($(this), topPosition, leftPosition);
          }
        }
      }
    }
  }

    function addBox(parentToAppendTo, top, left) {
        parentToAppendTo.append(`
            <div id="boxParent${elementNumber}" name='box' class="sortable_list myDraggable box-style"> 
            ${elementNumber}</div>`);
        $(`#boxParent${elementNumber}`).css('top', top - 20);
        $(`#boxParent${elementNumber}`).css('left', left);
        var randomColor = Math.floor(Math.random() * 16777215).toString(16);
        $(`#boxParent${elementNumber}`).css('background-color', '#' + randomColor);
        $(`#boxParent${elementNumber}`).data('test', true);
        $(`#boxParent${elementNumber}`).droppable(boxDroppableOptions);
        $(`#boxParent${elementNumber}`).resizable({
            handles: 'n, w, s, e, ne, se, sw, nw',
        });
        $(`#boxParent${elementNumber}`).draggable({
            stack: "div",
            cursorAt: { top: 0, left: 0 },
        });
        elementNumber++;
    }
    
  $("#add_section").click(function(e) {
   ...