时间戳

首页 > 解决方案 > 在列表之间单击时移动 li 项目无法正常工作

javascript - 在列表之间单击时移动 li 项目无法正常工作

问题描述

当我单击第一个列表（id="columns"）中的项目时，我必须列出并使用 jquery 函数将项目从一个列表（id="columns"）移动到另一个列表（id="columns1"） .

这部分工作正常，但是当我在第一个列表（id="columns"）中添加一个新项目时，之前移动的项目显示在第一个列表（id="columns"）中。

有没有办法防止移动的项目出现在第一个列表中？有没有办法用香草js来做，还是我需要使用jquery？

这是我正在创建的待办事项列表应用程序的一部分，您可以在其中添加任务、删除任务、单击任务以将其视为已完成的任务等。

// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
 var span = document.createElement("SPAN");
 var txt = document.createTextNode("\u00D7");
 span.className = "close";
 span.appendChild(txt);
 myNodelist[i].appendChild(span);
}

// Click on a close button to hide the current list item
function closeEvent() {
 var close = document.getElementsByClassName("close");

 for (var i = 0; i < close.length; i++) {
  close[i].onclick = function () {
   var div = this.parentElement;
   div.style.display = "none";

   renderGraph();
  }
 }
}

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function (ev) {
 if (ev.target.tagName !== 'LI') return;

 ev.target.classList.toggle('checked');
 renderGraph();
}, false);


// Create a new list item when clicking on the "Add" button
function newElement() {
 var li = document.createElement("li");

 li.className = "column";
 li.draggable = "true";
 // order according to time
 li.setAttribute("data-time", document.getElementById("myInput1").value);
 // order according to time

 var inputValue = document.getElementById("myInput").value;

 var inputValue1 = document.getElementById("myInput1").value;
 var tine = document.getElementById("myInput1");
 tine.dateTime = "6:00"
 // inputValue2.datetime = "6:00";



 var tt = document.createTextNode(inputValue1 + " - ");
 li.appendChild(tt);


 var t = document.createTextNode(inputValue);
 li.appendChild(t);


 if (inputValue === '') {
  alert("You must write a task!");
 } else {

  document.getElementById("columns").appendChild(li);
  // order according to time start

  setTimeout(function () {
   var sortItems = document.querySelectorAll("[data-time]");
   var elemArray = Array.from(sortItems);
   elemArray.sort(function (a, b) {
    if (a.getAttribute('data-time') < b.getAttribute('data-time')) { return -1 } else { return 1 }
   });

   // 
   document.getElementById("columns").innerHTML = "";

   elemArray.forEach(appendFunction);

   function appendFunction(item, index) {
    document.getElementById("columns").innerHTML += item.outerHTML;
   }

   afterUpdate();
  });




  // order according to time end

 }
 document.getElementById("myInput").value = "";
 document.getElementById("myInput1").value = "";

 var span = document.createElement("SPAN");
 var txt = document.createTextNode("\u00D7");
 span.className = "close";
 span.appendChild(txt);
 li.appendChild(span);

 for (i = 0; i < close.length; i++) {
  close[i].onclick = function () {
   var div = this.parentElement;
   div.style.display = "none";
  }
 }
}


// Add tasks by pressing enter
// Get the input field
var input = document.getElementById("myInput");

// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function (event) {
 // Number 13 is the "Enter" key on the keyboard
 if (event.keyCode === 13) {
  // Cancel the default action, if needed
  event.preventDefault();
  // Trigger the button element with a click
  document.getElementById("myBtn").click();

 }
});
// // 
// // 




var btn = document.querySelector('.add');
var remove = document.querySelector('.column');

function dragStart(e) {
 this.style.opacity = '0.4';
 dragSrcEl = this;
 e.dataTransfer.effectAllowed = 'move';
 e.dataTransfer.setData('text/html', this.innerHTML);
};

function dragEnter(e) {
 this.classList.add('over');
}

function dragLeave(e) {
 e.stopPropagation();
 this.classList.remove('over');
}

function dragOver(e) {
 e.preventDefault();
 e.dataTransfer.dropEffect = 'move';
 return false;
}

function dragDrop(e) {
 if (dragSrcEl != this) {
  dragSrcEl.innerHTML = this.innerHTML;
  this.innerHTML = e.dataTransfer.getData('text/html');
  closeEvent();
 }
 return false;
}

function dragEnd(e) {
 var listItems = document.querySelectorAll('.column');
 [].forEach.call(listItems, function (item) {
  item.classList.remove('over');
 });
 this.style.opacity = '1';
}

function addEventsDragAndDrop(el) {
 el.addEventListener('dragstart', dragStart, false);
 el.addEventListener('dragenter', dragEnter, false);
 el.addEventListener('dragover', dragOver, false);
 el.addEventListener('dragleave', dragLeave, false);
 el.addEventListener('drop', dragDrop, false);
 el.addEventListener('dragend', dragEnd, false);
}

function addDragAndDrop() {
 var listItems = document.querySelectorAll('.column');

 listItems.forEach(addEventsDragAndDrop);
}

afterUpdate();

function afterUpdate() {
 closeEvent();
 addDragAndDrop();
 renderGraph();
}


function addNewItem() {
 var newItem = document.querySelector('.input').value;
 if (newItem != '') {
  document.querySelector('.input').value = '';
  var li = document.createElement('li');
  var attr = document.createAttribute('column');
  var ul = document.querySelector('ul');

  li.className = 'column';
  attr.value = 'true';

  li.setAttributeNode(attr);
  li.appendChild(document.createTextNode(newItem));
  ul.appendChild(li);

  addEventsDragAndDrop(li);

 }
}
#myInput1 {
 width: 180px;
 height: 36px;
 margin-right: 10px;
 /* margin-left: -40px; */
 /* padding: 10px; */
 /* color: red; */
 /* box-sizing: border-box; */
 /* background-color: blue; */
 /* display: inline-block; */
}

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

/* Include the padding and border in an element's total width and height */
* {
  box-sizing: border-box;
  font-family: 'Josefin Sans', sans-serif;

}

p {
 font-weight: 300;
}
h1 {
 font-weight: 300;
}

#x-text {
 color: #f97350;
 font-size: 1.5rem;
 
}

::placeholder{
 color: #777d71;
}

#myInput1:before {
content:'Time:';
margin-right:.6em;
color: #777d71;
}
/* Remove margins and padding from the list */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Style the list items */
ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  background: #f7f6e7;
  font-size: 18px;
  transition: 0.2s;
  color: rgb(94, 91, 91);

  /* make the list items unselectable */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
  background: #dfddc5;
}

/* Darker background-color on hover */
ul li:hover {
  background: rgb(207, 205, 205);
}

/* When clicked on, add a background color and strike out text */
ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

/* Style the close button */
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
  color: #f97350;
  /* font-size: 1.5rem; */
}

.close:hover {
  background-color: #f97350;
  color: white;
}

/* Style the header */
.header {
  background-color: #777d71;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

/* Clear floats after the header */
.header:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the input */
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
 }

/* Style the "Add" button */
/* .addBtn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
} */

/* .addBtn:hover {
  background-color: #bbb;
} */

#finished-tasks {
  /* box-sizing: border-box; */
  padding: 20px;
  display: grid;
  align-content: center;
  justify-content: center;
  background-color:#bbd38b ;
  color: white;
  margin-bottom: -20px;
  margin-top: 40px;
  
}
#finished-tasks-p {
  /* box-sizing: border-box; */
  padding: 20px;
  display: grid;
  align-content: center;
  justify-content: center;
  background-color:#bbd38b ;
  color: white;
  margin-bottom: 0;
  margin-top: 0;
 
  
}

/* #myChart{
  margin-top: 50px;
  width: 50vw;
  height: 100px;
  padding-left: 200px;
  padding-right: 200px;
} */

/* canvas{

  width:1000px !important;
  height:auto !important;
  margin: auto;
  

} */

@media only screen and (max-width: 855px){
  input {
    margin: 10px;
  }
  #myInput {
    display: grid;
    width:70vw;
    /* align-content: center; */
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDIV" class="header">
  <h1>My Daily Tasks</h1>
  <p>Add a time and task then press enter. When finished task click on task bar</p>

  <p>To delete task click on <span id="x-text">x</span> in the corner of task bar</p>
  <input type="time" id="myInput1" value="06:00">
  <input name="text" type="text" id="myInput" placeholder="My task...">

  <span onclick="newElement()" class="addBtn" id="myBtn"></span>
 </div>
 <ul id="columns">
  <!-- <li draggable="true" class="column">test</li>
  <li draggable="true" class="column">test1</li> -->
  <!-- <li class="column" draggable="true">w</li>
  <li class="column" draggable="true">ff</li>
  <li class="column" draggable="true">uuu</li> -->
 </ul>
 <ul id="columns2">
  <h1 id="finished-tasks">finished Tasks</h1>
  <p id="finished-tasks-p">Finished tasks would show up here once you have clicked on the task</p>

 </ul>

 <!-- adding a graph -->
 <canvas id="myChart" width="400" height="400"></canvas>

 <script src="/graph.js"></script>
 <script src="/app.js"></script>
 <!--
 <div id="element"></div>
 <script>
  document.getElementById('element').innerHTML = 'Hi';
 </script>-->


 <script>
$("#columns").on('click', 'li', function () {
   $(this).appendTo('#columns2');
  });

  $("#listC").on('click', 'li', function () {
   $(this).appendTo('#listB');
  });

 </script>

标签： javascriptjqueryhtmluser-interface

解决方案

将您的 setTimeout 调用更改为：

setTimeout(function () {
   var sortItems = Array.from(document.querySelectorAll("[data-time]"))
    .filter((item) => !item.classList.contains('checked'))
    .sort(function (a, b) {
      if (a.getAttribute('data-time') < b.getAttribute('data-time')) { return -1 } else { return 1 }
    });

   document.getElementById("columns").innerHTML = "";

   sortItems.forEach(appendFunction);

   function appendFunction(item, index) {
    document.getElementById("columns").innerHTML += item.outerHTML;
   }

   afterUpdate();
});

关键段落在这里：

.filter((item) => !item.classList.contains('checked'))

以前，您要选择所有项目，甚至是已经检查过的项目。这会过滤掉那些。

这是一个您可以尝试的工作JSFiddle 。我必须向 addBtn 添加一个事件侦听器才能让它在那里工作，但是从我的本地计算机运行时，您的原始脚本很好。

推荐阅读