GMAIL列表类似样式，选择，删除和追加 - JavaScript ES5

Question

我正在使用JS ES5中的GMAIL，我只是使用const而且，就是这样。

目的：用户点击红色矩形并将其移动到任何列表。 当用户覆盖heading3时，heading3会改变bg颜色，鼠标将变为指针。

当用户在h3标签上鼠标时，列表将附加到该列表。 注意，如果选择了li，则移动所有这些。如果没有选择，但是您从矩形拖动它，那么只有那个将移动，并且不必选择它。

我不太确定如何实现这一点。我有一些想法，但不知道如何开始。不确定拖放是如何工作的。

我需要参加活动，对吧？如果此鼠标是h3的目标，则动态地将光标从（/）更改为指针。 Drop附加到列表中。

嗯，这是codepen中的代码：https://codepen.io/Aurelian/pen/dJryrX?editors=1010

JS：

window.onload = function() {

  //////////////////////////////////
    // VARIABLES
    //////////////////////////////////
  // Form
  const form = document.querySelector('#registrar');
  const input = form.querySelector('input');

  // Lists
  const partyLists = document.querySelectorAll('.party-lists');
  const partyInvitedList = document.querySelector('#list-invited')
  const partyGoingList = document.querySelector('#list-going');
  const partyNotSure = document.querySelector('#list-not-sure');
  const partyNotGoing = document.querySelector('#list-not-going');

  // List Options
  const listOptions = document.querySelector('.list-options');
  const btnMoveToGoing = document.querySelector('.btnMoveGoing');
  const btnMoveToNotSure = document.querySelector('.btnMoveNotSure');
  const btnMoveToNotGoing = document.querySelector('.btnMoveNotGoing');
  const btnDeleteSelected = document.querySelector('.btnDeleteSelected');


  //////////////////////////////////
    // FUNCTIONS
    //////////////////////////////////

  // Grab the LI (show a tooltip - moving convo);
  // When the mouse with the convo is over one of the headings, make the bg yellow
  // On mouse up on the heading, append the selected list there or a list that was dragged by square not selected

  function dragAndDrop(e) {
    var mouseDown = document.onmousedown = OnMouseDown;
    var mouseUp = document.onmouseup = OnMouseUp;

    // On mouse down, get this element, or selected elements

    // If the element hovers over the h3, change cursor and bg color
    // Mouse Up on h3, append the child to the list
  }

  function createLI(text) {
    const li = document.createElement('li');
    const move = document.createElement('div');
    move.setAttribute('class', 'move');
    li.appendChild(move);
    const span = document.createElement('span');  
    span.textContent = text;
    li.appendChild(span);
    const label = document.createElement('label');
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    label.appendChild(checkbox);
    li.appendChild(label);  
    const editButton = document.createElement('button');
    editButton.textContent = 'edit';
    li.appendChild(editButton);
    const removeButton = document.createElement('button');
    removeButton.textContent = 'remove';
    li.setAttribute('draggable','true');
    li.appendChild(removeButton);
    return li;
  }


  //////////////////////////////////
    // EVENT HANDLERS
    //////////////////////////////////
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    const text = input.value;
    input.value = '';
    const li = createLI(text);
    partyInvitedList.appendChild(li);
  });

  for (var i = 0; i < partyLists.length; i++) {
  partyLists[i].addEventListener('click', function(e) {
    if (e.target.tagName === 'BUTTON') {
      const button = e.target;
      const li = button.parentNode;
      const ul = li.parentNode;
      if (button.textContent === 'remove') {
        ul.removeChild(li);
      } else if (button.textContent === 'edit') { 
        const span = li.children[1];
        const input = document.createElement('input');
        input.type = 'text';
        input.value = span.textContent;
        li.insertBefore(input, span);
        li.removeChild(span);
        button.textContent = 'save';
      } else if (button.textContent === 'save') { 
        const input = li.children[1];
        const span = document.createElement('span');
        span.textContent = input.value;
        li.insertBefore(span, input);
        li.removeChild(input);
        button.textContent = 'edit';
      }
    }
  });
  }

  listOptions.addEventListener('click', function(e) {
     for (var i = 0; i < partyLists.length; i++) {
    partyLists[i].querySelectorAll('*:checked').forEach(function (listItems) {
      const button = e.target;
      var items = listItems.parentNode.parentNode;
      if(button.className === 'btnMoveGoing') {
          partyGoingList.appendChild(items);
          items.checked = false;
          var item = listItems;
          item.checked = false;
      } else if(button.className === 'btnMoveNotSure'){
          partyNotSure.appendChild(items);
          var item = listItems;
          item.checked = false;
      } else if(button.className === 'btnMoveNotGoing'){
          partyNotGoing.appendChild(items);
          var item = listItems;
          item.checked = false;
      } else if(button.className === 'btnDeleteSelected'){
         listItems.parentNode.parentNode.remove();
         var item = listItems;
         item.checked = false;
      } 
    });
     }
  });


}

HTML：

<div class="top">
<form id="registrar">
<input type="text" name="name" placeholder="Invite Someone">
<button type="submit" name="submit" value="submit">Submit</button>
</form>

<div class="list-options">
<button class="btnMoveGoing">Move to Going</button>
<button class="btnMoveNotSure">Move to Not Sure</button>
<button class="btnMoveNotGoing">Move to Not Going</button>
<button class="btnDeleteSelected">Delete Selected</button>
</div>

</div><!-- /top -->

<div class="col">
<h3>Invited</h3>
<ul id="list-invited" class="party-lists">

</ul>
</div>

<div class="col">
<h3>Going</h3>
<ul id="list-going" class="party-lists">

</ul>
</div>

<div class="col">
<h3>Not Sure</h3>
<ul id="list-not-sure" class="party-lists">

</ul>
</div>

<div class="col">
<h3>Not Going</h3>
<ul id="list-not-going" class="party-lists">

</ul>
</div>

CSS：

/*  

Have three list
Add Input to main list
Be able to edit, delete from any list

Be able to move the items through the lists

Make some acction if the buttons are checked

// Put this UI in TABS

*/
h3 {
  background: grey;
  margin: 0 10px;
  padding: 10px;
  color: white;
}
.move {
  height: 30px;
  width: 10px;
  background-color: red;
  display: inline-block;
  cursor: move;
}
.col {
  width: 25%;
  float: left;
}

.party-list {

}