在 div 中拖放列表元素答案

【问题标题】：Drag and Drop List Elements in a div在 div 中拖放列表元素
【发布时间】：2019-12-07 15:17:21
【问题描述】：

我正在制作一个在线编辑应用程序。通过单击左侧导航栏上的按钮来创建列表项。我想使用拖放事件在 div 周围移动列表，但我无法让它工作。错误消息是：'Node' 上的 appendChild'：参数 1 不是 'Node' 类型。

<!DOCTYPE html>
<html>

<head>
  <title>Editor</title>
  <script>
     window.onload = function(){
        document.getElementById('newHead').addEventListener('click', addHeader);
        document.getElementById('newLi').addEventListener('click', addListElement);
     }
     const addHeader = function(){
        const newHeader = document.createElement('ul');
        newHeader.className = 'newUl';
        newHeader.textContent = 'header';
        newHeader.setAttribute("contenteditable", true);
        newHeader.setAttribute('draggable', true);
        newHeader.id = 'Head';
        const ul = document.getElementById('bulletPoints');
        ul.appendChild(newHeader);
        newHeader.addEventListener('click', selectElement);
     }

     const addListElement = function(){
         if (selected != null){
             const newListElement = document.createElement('li');
             newListElement.className = 'newLi';
             newListElement.textContent = 'textContent';
             newListElement.setAttribute('contenteditable', true);
             newListElement.setAttribute('draggable', true);
             selected.appendChild(newListElement);
             newListElement.addEventListener('click', selectElement);
             newListElement.addEventListener('dragstart', drag);
         }
     }
     let selected;
     const selectElement = function(e){
         selected = e.target;
     }

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

     const drag = function(ev) {
         ev.dataTransfer.setData("text", ev.target.id);
     }

     const drop = function(ev){
         ev.preventDefault();
         let data = ev.dataTransfer.getData("text");
         ev.target.appendChild(document.getElementById(data));
     }
  </script>
  
</head>

<body>
<div id="inputArea">
  <div id="leftNav">
      <button type='newHead' id='newHead' class='inlineButton'>Header</button>
      <button type='newLi' id='newLi' class='inlineButton'>List</button>
  </div>
  <div id="bulletPoints" contenteditable="true" ondrop="drop(event)" ondragover="allowDrop(event)">
     
  </div>
</div>

  <script src="javascripts/script.js"></script>
</body>
</html>

【问题讨论】：

selected 在 addListElement 函数中包含什么？能否提供script.js中的代码，上面的代码没有运行
我已经修改了代码
还是不行，因为 selected 为空，函数 addListElement 永远不会被执行。
我已经修复了代码，现在可以使用了

标签： javascript html css dom-events

【解决方案1】：

问题在于拖动功能，目标中不存在id。但是如果你想在 div 周围移动元素，内置的拖放功能并不是一个好的选择，因为它允许拖放到可以拖放的区域。

查看此https://developer.mozilla.org/en-US/docs/Web/API/Document/drag_event - 了解拖放功能。

如果你想在 div 中移动元素，你应该试试这样 - https://www.w3schools.com/howto/howto_js_draggable.asp

<!DOCTYPE html>
<html>

<head>
  <title>Editor</title>
  <script>
     window.onload = function(){
        document.getElementById('newHead').addEventListener('click', addHeader);
        document.getElementById('newLi').addEventListener('click', addListElement);
     }
     const addHeader = function(){
        const newHeader = document.createElement('ul');
        newHeader.className = 'newUl';
        newHeader.textContent = 'header';
        newHeader.setAttribute("contenteditable", true);
        newHeader.setAttribute('draggable', true);
        newHeader.id = 'Head';
        const ul = document.getElementById('bulletPoints');
        ul.appendChild(newHeader);
        newHeader.addEventListener('click', selectElement);
        newHeader.addEventListener('dragstart', drag);
     }

     const addListElement = function(){
         if (selected != null){
             const newListElement = document.createElement('li');
             newListElement.className = 'newLi';
             newListElement.textContent = 'textContent';
             newListElement.setAttribute('contenteditable', true);
             newListElement.setAttribute('draggable', true);
             selected.appendChild(newListElement);
             newListElement.addEventListener('click', selectElement);
             newListElement.addEventListener('drag', drag);
         }
     }
     let selected, current;
     const selectElement = function(e){
         selected = e.target;
     }

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

     const drag = function(ev) {
         
         let id = ev.target.id;
         
         if (!id) {
         
            if (ev.target.parentNode) {
             id = ev.target.parentNode.id;
            } else {
              //handle this case
            }
            
         }
         
         if (id)
         ev.dataTransfer.setData("text", id);
    
         current = ev.target;
     }

     const drop = function(ev){
         ev.preventDefault(); 
         let data = ev.dataTransfer.getData("text");
         let node = document.getElementById(data);
         node.parentNode.removeChild(node);
         ev.target.appendChild(node);
         
         ev.dataTransfer.clearData();
     }
  </script>
  
</head>

<body>
<div id="inputArea">
  <div id="leftNav">
      <button type='newHead' id='newHead' class='inlineButton'>Header</button>
      <button type='newLi' id='newLi' class='inlineButton'>List</button>
  </div>
  <div id="bulletPoints" contenteditable="true" ondrop="drop(event)" ondragover="allowDrop(event)">
     
  </div>
  <div id="bulletPoints1" contenteditable="true" ondrop="drop(event)" ondragover="allowDrop(event)">
     
  </div>
</div>

  <script src="javascripts/script.js"></script>
</body>
</html>

【讨论】：