我一直在糾結(jié)這段代碼(HTML、CSS和JavaScript)。這段代碼讓我可以在HTML中使用拖動(dòng)和復(fù)制功能。左邊是4樣?xùn)|西，右邊是8個(gè)盒子，用標(biāo)簽Mon - Mon表示。當(dāng)我選擇左邊4個(gè)項(xiàng)目中的一個(gè)，并將其拖到標(biāo)簽上時(shí)，它會(huì)復(fù)制該項(xiàng)目，并將其放入我放置該項(xiàng)目的框w內(nèi)的選擇列表中。然而，當(dāng)我試圖選擇另一個(gè)項(xiàng)目并將其拖動(dòng)到右邊的同一個(gè)框中時(shí)，我得到了一個(gè)錯(cuò)誤。

我做錯(cuò)了什么？這是代碼。感謝任何幫助。您還可以在以下網(wǎng)址查看運(yùn)行中的代碼:

https://jsfiddle.net/Misterjackmstein/bxhjkzna/1/

/* 
         javascript
         */

function onDragStart(event) {
  event
    .dataTransfer
    .setData('text/plain', event.target.id);

  event
    .currentTarget
    .style
    .backgroundColor = 'yellow';
}

function onDragOver(event) {
  event.preventDefault();
}


function onDrop(event) {
  event.preventDefault();
  console.log("event", event);
  ClassName = event.target.className; // lets get the class that this onDrop sits on as triggered by the drop
  console.log("ClassName:", ClassName);
  //get the values for the other attributes associated wit the div
  currentValue = datavalue = event.target.attributes.datavalue.value;
  currentDay = dateid = event.target.attributes.dateid.value;

  console.log("ClassName:", ClassName, datavalue, dateid);
  /*
   *   We will:
   *   
   *   1. Get the task from the left side and 
   *      set it up as an element that we will build as a Select box mode.
   *   2.  If a Select box already exists in the current node, we just 
   *       add the new task as an option.
   *   3. If the Select does not exist in the current node, we will need to
   *      create it and add the Option to it.
   */
  if (ClassName == "day_num") {
    var data = event.dataTransfer.getData("text"); // gets the dragged item ID
    console.log("Data", data);
    // gets the value of the element data-value and dateID that triggered the drop
    console.log("current Value before", currentValue, currentDay);
    currentValue = parseInt(currentValue);
    nextValue = currentValue + 1;
    console.log("current Value after", currentValue, nextValue);
    event.target.attributes.datavalue.value = nextValue.toString();
    // sets the value of the element datavalue that triggered the drop
    var nodeCopy = document.getElementById(data).cloneNode(true);
    // copies the element from the parent element that was dragged over this element
    //  sets certain of the elements.

    nodeCopy.id = "newId"; /* We cannot use the same ID */
    nodeCopy.style.textAlign = "left";
    nodeCopy.setAttribute('draggable', false);
    console.log("nodeCopy before", nodeCopy);
    taskString = nodeCopy.innerHTML; // get the text with the task and pre-append the number
    console.log("Task string", taskString);
    taskCombo = currentValue.toString() + taskString;
    // If this is the first time we need to set up the slect box.
    class_Id = 'toDoSelect' + currentDay;
    div_Id = 'mySelect' + currentDay;
    if (currentValue == 1) {
      listBox = "<select class=" + class_Id + " id=" + div_Id + " style='width: 135px;' size='3'>" + '</select> ';
      useDiv = "<div class='day_num'> ";
      event.target.innerHTML = useDiv + currentDay + "<" + "/div>" + '\r\n' + listBox;
    };
    console.log("ListBox:", event.target.innerHTML);
    var x = document.getElementById(div_Id);
    console.log("x", x);
    var target_Select = document.getElementById(div_Id);
    console.log("target_Select", target_Select);
    var option = document.createElement("option");
    option.text = taskCombo;
    console.log("option text", option.text);
    x.add(option);

    //        const childNode=event.target.appendChild(nodeCopy);  

    console.log("nodeCopy after", nodeCopy);

  }
}

/*
            CSS
            Created on : Jun 9, 2023, 2:18:45 PM
            Author     : jackmStein
        */

.example-parent {
  border: 2px solid #DFA612;
  color: black;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
  width: auto;
}

.example-origin {
  /* flex-basis: 100%; */
  /*  flex-grow: 1;*/
  padding: 10px;
  width: 50%;
}

.example-draggable {
  background-color: #4AAE9B;
  font-weight: normal;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 10px;
  text-align: left;
}

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  counter-reset: number;
}

body,
html {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.example-dropzone {
  background-color: #6DB65B;
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

.container {
  max-width: 1100px;
  padding: 20px;
  -webkit-display: -webkit-box;
  -webkit-display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #594255;
  flex-direction: row;
  height: 100%;
}

.day_num {
  background-color: #fff;
  width: 140px;
  height: 100%;
  margin: 2px;
  text-align: left;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 1.2em;
  color: #594255;
  flex-direction: row;
  flex-shrink: 1;
}

.list-wrap {
  padding: 40px;
  background-color: #d8b9c3;
  border-radius: 5px;
  width: 400px;
}

div.list {
  counter-reset: list-number;
}

div.list div:before {
  counter-increment: list-number;
  content: counter(list-number);
  margin-right: 10px;
  margin-bottom: 10px;
  width: 35px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background-color: #d7385e;
  border-radius: 50%;
  color: #fff;
}

<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <title>Drag and Copy</title>

  <link href="style.css" rel="stylesheet" type="text/css">
  <script src="script.js"></script>
</head>
<h1>To do list</h1> <br>

<body>
  <div class="example-parent" id="parent">

    <div class="example-origin" id="origin">
      To-do
      <div id="draggable-1" class="example-draggable" draggable="true" ondragstart="onDragStart(event);">
        thing 1
      </div>
      <div id="draggable-2" class="example-draggable" draggable="true" ondragstart="onDragStart(event);">
        thing 2
      </div>
      <div id="draggable-3" class="example-draggable" draggable="true" ondragstart="onDragStart(event);">
        thing 3
      </div>
      <div id="draggable-4" class="example-draggable" draggable="true" ondragstart="onDragStart(event);">
        thing 4
      </div>
    </div>

    <div class="container" id="container">

      <script>
        var container = document.getElementById('container');
        container.style.WebkitFlexWrap = 'wrap';
        container.style.flexWrap = 'wrap';
        let txt = document.getElementById("container");
        txt.style.textAlign = "left";
      </script>


      <div class="day_num" ondragover="onDragOver(event);" ondrop="onDrop(event);" datavalue="1" dateid="Mon" id="Mon">
        Mon

      </div>

      <div class="day_num" ondragover="onDragOver(event);" ondrop="onDrop(event);" dataValue="1" dateId="Tue" id="Tue">
        Tue
      </div>

      <div class="day_num" ondragover="onDragOver(event);" ondrop="onDrop(event);" dataValue="1" dateId="Wed" id="Wed">
        Wed
      </div>

      <div class="day_num" ondragover="onDragOver(event);" ondrop="onDrop(event);" dataValue="1" dateId="Thr" id="Thr">
        Thr
      </div>

      <div class="day_num" ondragover="onDragOver(event);" ondrop="onDrop(event);" dataValue="1" dateId="Fri" id="Fri">
        Fri
      </div>

      <div class="day_num" ondragover="onDragOver(event);" ondrop="onDrop(event);" dataValue="1" dateId="Sat" id="Sat">
        Sat
      </div>

      <div class="day_num" ondragover="onDragOver(event);" ondrop="onDrop(event);" dataValue="1" dateId="Sun" id="Sun">
        Sun
      </div>

      <div class="day_num" ondragover="onDragOver(event);" ondrop="onDrop(event);" dataValue="1" dateId="Mon" id="Mon">
        Mon
      </div>
    </div>
    <!-- close Div container  -->
  </div>
  <!-- close Div example-parent  -->
</body>

</html>