Javascript 在拖放到拖动区域时，在输入类型中显示形状id，并在选择形状时在拖动区域中编辑形状

我正在用JavaScript进行实验，以完成一些拖放任务，比如每当形状被拖放到拖放区域时显示ID。我不知道每次在拖动空间中放置一个形状时，如何在数字的表格输入类型中显示形状的ID

下面是JavaScript代码

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

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

  function drop(ev) {
    ev.preventDefault();

    var id = ev.dataTransfer.getData("text");
    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;
      document.getElementById(latestId).value = value;
      console.log(value);
    }

    if (id == "drag3" && 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;
      document.getElementById(latestId).value = value;
      console.log(value);
    }
  }

  function remove(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var del = confirm(
      "You are about to DELETE this insert. Do you wish to continue?"
    );

    if (del) {
      var el = document.getElementById(data);
      el.parentNode.removeChild(el);

      console.log("item deleted");
    }
  }
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";
    }
  }

  function increaseheight() {
    var id = document.getElementById(latestId).id;
    var myImg = document.getElementById(id);
    var currHeight = myImg.clientHeight;
    if (currHeight == 500) {
      myImg.style.height = currHeight + 0 + "px";
    } else {
      myImg.style.height = currHeight + 15 + "px";
    }
  }

  function decreaseheight() {
    var id = document.getElementById(latestId).id;
    var myImg = document.getElementById(id);
    var currHeight = myImg.clientHeight;
    if (currHeight == 50) {
      myImg.style.height = currHeight - 0 + "px";
    } else {
      myImg.style.height = currHeight - 15 + "px";
    }
  }

下面是html的代码，其中包含表输入

<div class="table-edit">
    Table:<input
    class="table-id"
    ondrop="drop(event)"
    type="number"
    value=""
    />
</div>

---

另外，如果有一种方法可以在选择不同形状时更改它们的形状，我很高兴能收到一些关于如何实现这一点的想法

我已经将代码简化了很多，但希望这能满足您的需要

我假设形状的id是指形状的

id

属性末尾的数字？您可以使用正则表达式来解析这个数字，但我已经找到了一个更简单的解决方案，将这个数字存储在数据属性中

功能牵引器（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“id”，ev.target.dataset.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var id=parseInt（ev.dataTransfer.getData（“id”），10）；
inputField.value=id；
}

.shapes{
显示器：flex；
}
.圆圈{
背景：rgb（168168168）；
边界半径：50%；
边框：rgb（168168168）6px固体；
宽度：80px；
高度：80px；
利润率：10px；
}
.矩形{
利润率：10px；
高度：80px；
背景：rgb（168168168）；
文本对齐：居中；
边界半径：7%；
宽度：80px；
边框：rgb（168168168）6px固体；
}
.降落区{
填充：50px；
边框：带点的2px浅灰色；
利润率：10px；
文本对齐：居中；
字体：斜体；
颜色：灰色；
}
.输入{
利润率：10px；
}

下降区

我会尽量简化您的代码，以显示问题的本质。另外，一次只问一个问题比较好。事实上，我觉得你简化得太多了。每次我将一个形状放入放置框时，形状的id都会增加，因此我问如何显示这些id，这些id对于放入表inputOk中的每个形状都会增加，这很不幸。我想在你的问题中加上这个解释，以便更清楚地说明这就是你要做的。

div class="mains">
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->

    <section class="content container">
      <div class="row">
        <div class="col-md-12">
          <div class="box box-solid">
            <div class="box-header bg-teal">
              <h3 class="box-title">Tables</h3>
            </div>

            <form action="" method="POST">
              <div class="box-body">
                <div class="row">
                  <div class="col-md-12">
                    <table id="example1" class="table table-striped">
                      <div class="table-area">
                        <div class="row container table-section">
                          <div
                            class="roster-box draggable-shapes col-lg-4 col-md-4 col-sm-12"
                            ondrop="remove(event)"
                            ondragover="allowDrop(event)"
                          >
                            <h1
                              class="text-center"
                              style="text-decoration: underline"
                            >
                              tables
                            </h1>
                            <div class="table-area-section">
                              <li>
                                <div
                                  class="circle"
                                  id="drag1"
                                  draggable="true"
                                  ondragstart="drag(event)"
                                  alt="circle"
                                ></div>
                              </li>

                              <li>
                                <div
                                  class="rectangle"
                                  id="drag3"
                                  draggable="true"
                                  ondragstart="drag(event)"
                                ></div>
                              </li>
                            </div>
                          </div>
                          <div
                            class="drag-and-drop col-lg-8 col-md-8 col-sm-12"
                          >
                            <div
                              id="drag-area"
                              class="roster-box text-center drag-section"
                              ondrop="drop(event)"
                              ondragover="allowDrop(event)"
                              onselect="selectImage()"
                            ></div>
                            <div class="edit-section">
                              <li>
                                <div class="table-edit">
                                  Table:<input
                                    class="table-id"
                                    ondrop="drop(event)"
                                    type="number"
                                    value=""
                                  />
                                </div>
                              </li>

                              <li>
                                Width:
                                <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>
                              </li>
                              <li>
                                Height:
                                <div
                                  class="btn-group"
                                  role="group"
                                  aria-label="Third group"
                                >
                                  <button
                                    type="button"
                                    class="btn btn-secondary"
                                    onclick="increaseheight()"
                                  >
                                    +
                                  </button>
                                </div>
                                <div
                                  class="btn-group"
                                  role="group"
                                  aria-label="Third group"
                                >
                                  <button
                                    type="button"
                                    class="btn btn-secondary"
                                    onclick="decreaseheight()"
                                  >
                                    -
                                  </button>
                                </div>
                              </li>
                            </div>
                          </div>
                        </div>
                      </div>
                    </table>
                  </div>
                </div>
              </div>
              <!-- /.box-body -->
            </form>
          </div>
          <!-- /. box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
  </div>
</div>

.table-area-section li {
  display: inline-block;
  padding: 8px;
}

.drag-section {
  height: 386.5px;
}

.edit-section {
  padding-top: 20px;
}

.edit-section li {
  list-style: none;
  display: inline-block;
  padding-left: 15px;
}

.input-group {
  width: 35px;
}

.table-id {
  width: 40px;
}

.draggable-shapes {
  border: 1px solid #c3ccff44;
  height: 677px;
}

.drag-and-drop {
  border: 1px solid #c3ccff44;
}

.table-services > tbody > tr > td,
.table-services > tbody > tr > th,
.table-services > tfoot > tr > td,
.table-services > tfoot > tr > th,
.table-services > thead > tr > td,
.table-services > thead > tr > th {
  padding: 20px;
}

.form-table {
  float: right;
  padding: 20px;
}

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

.rectangle {
  height: 80px;
  background: rgb(168, 168, 168);
  text-align: center;
  border-radius: 7%;
  width: 80px;
  border: rgb(168, 168, 168) 6px solid;
}