JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<div class="area-builder">
   <input type="number" min="0" id="width-area" class="form-control" placeholder="Width">
   <input type="number" min="0" id="height-area" class="form-control" placeholder="Height">
   <select id="valueStream">
     <option value="0">1</option>
     <option value="1">2</option>
     <option value="2">3</option>
     <option value="3">4</option>
   </select>
   <button type="button" class="lpms-3-button">Add area</button>
 </div>


 <div class="drop-target">
   <div class="grid">
   </div>
 </div>

CSS

.resizable {
    position: absolute;
    bottom: 2px;
    right: 5px;
    cursor: pointer;
}

.drop-target {
    width: 100%;
    height: 100vh;
    border: dashed 1px orange;
    background: whitesmoke url('https://s3.amazonaws.com/com.appgrinders.test/images/grid_20.png') repeat;
}

.area-builder {
    display: contents;
}

.gg-remove {
    box-sizing: border-box;
    position: relative;
    display: block;
    float: right;
    top: 5px;
    right: 5px;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 22px
}

    .gg-remove::before {
        content: "";
        display: block;
        box-sizing: border-box;
        position: absolute;
        width: 10px;
        height: 2px;
        background: currentColor;
        border-radius: 5px;
        top: 8px;
        left: 4px
    }

JavaScript

var count = 0;

$(".lpms-3-button").click(function() {
  count += 1;

  var areaWith = $("#width-area").val();
  var areaHeight = $("#height-area").val();
  var areaColor = $("#text").val();
  var valueStream = $("#valueStream option:selected").text();
  console.log(areaWith, areaHeight, valueStream)
  var objects1 = `<div class="grid-item" data-value-stream="${valueStream}" id="boxVs${count}" style="width:${areaWith + "px"};height:${areaHeight + "px"}; left: 0px; top: 0px; background-color: #ccc ">
<a href="#" id="delete-area" class="btn btn-remove  hide "></a >

</div>`

  $(".grid").append(objects1);
  $(".grid-item").draggable({
    grid: [10, 10],
    snap: ".drop-target"
  });

  $(".drop-target").droppable({
    accept: ".drag-item"
  });
  $('.grid-item').resizable();
  $("#width-area").val("");
  $("#height-area").val("");
  $("#text").val("")
});

var myDraggable = $('.grid-item').draggable();
var widget = myDraggable.data('ui-draggable');
var clickEvent = null;

myDraggable.click(function(event) {
  if (!clickEvent) {
    widget._mouseStart(event);
    clickEvent = event;
  } else {
    widget._mouseUp(event);
    clickEvent = null;
  }
});

$(document).on("mouseover", function(event) {
  console.log('#' + event.target.id + '')
  $('#' + event.target.id + '').find("#delete-area").toggleClass("hide")
  $('#' + event.target.id + '').find("#delete-area").toggleClass("gg-remove")
  $("#delete-area").click(function() {
    $('#' + event.target.id + '').parent().remove();
  });


});