How to place rectangles to selected div corners?

Issue

Report designer uses divs to create fields, horizontal and vertical lines. jQuery UI selectable is used to make them selectable.

HTML:

<div class='designer-panel-body' style='height:100px'>
  <div class='designer-label' style='top:10px'>
    Field1
  </div>
  
  <div class='designer-label' style='top:60px; left:20px'>
    Field2
  </div>

  <div class='designer-label' style='top:10px; left:120px; height:60px'>
  </div>
</div>

CSS:

.designer-label {
  position: absolute;
  border: solid 1px;
}

.ui-selected {
  background-color: blue;
  color: white;
}

Javascript:

$(".designer-panel-body").selectable(
);

How to add small rectangles in borders if divs are selected, like:

How to change ui-selected style so that rectangles are added to corners? Backgound and color change is not visible in lines so something other is required to mark them as selected. Jquery, Jquery UI and Bootstrap 5 are used.

Answer in CSS/Javascript: Mark clicked Shapes with small Rectangles on Corners uses lots of Javacript for this. Can it be done in CSS?

Enhanced question is in How to place rectangles to selected element corners

Solution

var element = document.getElementById("element");
      var burchaklar = document.querySelectorAll(".burchak");
      var x, y, width, height;

      burchaklar.forEach(function (burchak) {
        burchak.addEventListener("mousedown", function (e) {
          e.preventDefault();
          x = e.clientX;
          y = e.clientY;
          width = parseInt(
            document.defaultView.getComputedStyle(element).width,
            10
          );
          height = parseInt(
            document.defaultView.getComputedStyle(element).height,
            10
          );

          document.addEventListener("mousemove", surish);
          document.addEventListener("mouseup", function () {
            document.removeEventListener("mousemove", surish);
          });
        });
      });

      function surish(e) {
        var dx = e.clientX - x;
        var dy = e.clientY - y;

        switch (event.target.id) {
          case "top-left":
            element.style.width = width - dx + "px";
            element.style.height = height - dy + "px";
            element.style.top = y + dy + "px";
            element.style.left = x + dx + "px";
            break;
          case "top-right":
            element.style.width = width + dx + "px";
            element.style.height = height - dy + "px";
            element.style.top = y + dy + "px";
            break;
          case "bottom-left":
            element.style.width = width - dx + "px";
            element.style.height = height + dy + "px";
            element.style.left = x + dx + "px";
            break;
          case "bottom-right":
            element.style.width = width + dx + "px";
            element.style.height = height + dy + "px";
            break;
        }
      }

.element {
        position: relative;
        width: 200px;
        height: 150px;
        background-color: lightblue;
        border: 2px solid darkblue;
      }

      .burchak {
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: red;
        cursor: nwse-resize; /* Chekkaga o'tish imkonini berish */
      }

      #top-left {
        top: -5px;
        left: -5px;
      }

      #top-right {
        top: -5px;
        right: -5px;
        cursor: nesw-resize; /* Chekkaga o'tish imkonini berish */
      }

      #bottom-left {
        bottom: -5px;
        left: -5px;
        cursor: nesw-resize; /* Chekkaga o'tish imkonini berish */
      }

      #bottom-right {
        bottom: -5px;
        right: -5px;
        cursor: nwse-resize; /* Chekkaga o'tish imkonini berish */
      }

<div class="element" id="element">
      <div class="burchak" id="top-left"></div>
      <div class="burchak" id="top-right"></div>
      <div class="burchak" id="bottom-left"></div>
      <div class="burchak" id="bottom-right"></div>
      <!-- Elementning ichki ma'lumotlari -->
    </div>

Answered By - Azyk