javascript - (JavaScript & HTML )将元素从一个列表移动到另一个列表

Question

我正在创建一个允许用户添加和删除任务的待办事项列表。我还希望允许用户将任何特定任务的副本添加到不同的列表中。例如，我可以单击一个按钮，它会创建一个副本(例如任务 A)，从(例如列表 A)到(例如列表 B)。

我试过这样做，如果你点击按钮，它会向列表中添加一个新类，但是，我不确定是否有更好的方法来做到这一点。

$(() => {
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newTask = $(this).val();
      if (newTask) {
        var li = $("<li><input type="
          checkbox " id="
          newtaskitem " class="
          right - margin "><label>test</label> <button type="
          button " class="
          delete "></button> <button type="
          button " class="
          addtolist2 "></button></li>");
        $('#tasksUL').append(li);
        $(this).val("");
        localStorage.setItem("newtaskUL", value);
      }
    }
  });
  $(document).on("click", ".delete", function() {
    $(this).parent().remove();
  });
  $(".addtolist2").on("click", function() {
    $(".addtolist2").css("opacity", 1.5 - $(".addtolist2").css("opacity"));
    $(".addtolist2").toggleClass("list2UL");
  });
});

label[for="list1menu"] {
  display: none;
  text-decoration: none;
  position: absolute;
  bottom: 250px;
  left: 250px;
  width: 680px;
  height: 540px;
}

input[name="newtask"] {
  text-decoration: none;
  position: absolute;
  top: 100px;
  left: 50px;
  width: 418px;
  word-wrap: break-word;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#togglelist1:checked~label[for="list1menu"] {
  text-decoration: none;
  position: absolute;
  display: block;
  bottom: 55px;
  left: 9px;
  width: 500px;
  height: 860px;
}

label[for="list2menu"] {
  display: none;
  text-decoration: none;
  position: absolute;
  bottom: 250px;
  left: 250px;
  width: 680px;
  height: 540px;
}

ul[class='list2UL'] {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 142px;
  left: 50px;
  list-style-type: none;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  word-wrap: break-word;
  width: 355px;
}

#togglelist2:checked~label[for="list2menu"] {
  text-decoration: none;
  position: absolute;
  display: block;
  bottom: 55px;
  left: 9px;
  width: 500px;
  height: 860px;
}

#togglelist2:checked~.list2UL {
  position: absolute;
  font-size: 30px;
  font-weight: 300;
  left: 85px;
  top: 5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#togglecountdown:checked~ul[class='list2UL'] {
  display: block;
  position: absolute;
  font-size: 30px;
  font-weight: 300;
  left: 85px;
  top: 5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<input type='checkbox' id="togglelist1" class='list' />
<label for="list1menu">
            <input type="text" name="newtask" value="" spellcheck="false" placeholder="New Todo" id="newtask">
            <ul id="list1UL">
              <li><input type="checkbox" id="newtaskitem" class="right-margin"><label>test</label> <button type="button" class="deletetask"></button> <button type="button" class="addtolist2"></button></li>
</ul>
</label>


<input type='checkbox' id="togglelist2" class='list' />
<label for="list2menu">
            <ul id="list2UL">
              <li><input type="checkbox" id="newtaskitem" class="right-margin"><label>test</label> <button type="button" class="deletetask"></button></button>
</li>
</ul>
</label>
</div>

Answer 1

$(".addtolist2").on( "click", function() {
    $(".addtolist2").css("opacity", 1.5 - $(".addtolist2").css("opacity"));
    $(".addtolist2").toggleClass("list2UL");

    // clone checked elements
    $('#todolist1 input:checked').parent().clone().appendTo('#todolist2');
});

我无法测试它，但它应该可以工作。