Javascript 拖放后使形状可选择

如何选择拖放区域中的形状，以便在单击按钮时可以根据高度和宽度编辑每个形状

拖放时，将复制形状，并为其指定不同的id，该id随拖放区域中的每个副本而递增。在拖动区域中放置形状时，形状的id也会显示在表格输入中

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}
  if (id == "drag1" && ev.target.id == "drag-area") {
    var nodeCopy = document.getElementById(id).cloneNode(true);
    nodeCopy.id = incrementId();
    function incrementId() {
      if (!this.latestId) this.latestId = 1;
      else this.latestId++;
      return this.latestId;
    }
    ev.target.appendChild(nodeCopy);
    var id = document.getElementById(latestId).id;
    //display id on shape
    document.getElementById(latestId).innerHTML = id;

    var value = document.getElementById(latestId).id;
    //display table id on input field when a shape is dropped
    document.getElementById("table-input").value = value;
    console.log(value);
  }
}

我试图做的是让拖动区域中的每个形状在单击时被选中，并通过单击按钮来编辑它们的大小（高度和宽度）。这就是我所拥有的

按钮。

<div
   class="btn-group"
   role="group"
   aria-label="Third group"
   >
    <button
     type="button"
     class="btn btn-secondary"
     onclick="increasewidth()"
     >
      +
     </button>
 </div>
 <div
    class="btn-group"
    role="group"
    aria-label="Third group"
   >
     <button
      type="button"
      class="btn btn-secondary"
      onclick="decreasewidth()"
     >
      -
     </button>
</div>

拖动放置形状的区域

<div
     id="drag-area"
     class="roster-box text-center drag-section"
     ondrop="drop(event)"
     ondragover="allowDrop(event)"
 ></div>

我需要帮助使拖放区域中的形状可选择和编辑

.circle {
  background: rgb(168, 168, 168);
  border-radius: 50%;
  border: rgb(168, 168, 168) 6px solid;
  width: 80px;
  height: 80px;
}

<div
     id="drag-area"
     class="roster-box text-center drag-section"
     ondrop="drop(event)"
     ondragover="allowDrop(event)"
 ></div>

function increasewidth() {
    var id = document.getElementById(latestId).id;
    var myImg = document.getElementById(id);
    var currWidth = myImg.clientWidth;
    if (currWidth == 500) {
      myImg.style.width = currWidth + 0 + "px";
    } else {
      myImg.style.width = currWidth + 15 + "px";
    }
  }

  function decreasewidth() {
    var id = document.getElementById(latestId).id;
    var myImg = document.getElementById(id);
    var currWidth = myImg.clientWidth;
    if (currWidth == 50) {
      myImg.style.width = currWidth - 0 + "px";
    } else {
      myImg.style.width = currWidth - 15 + "px";
    }
  }