Question

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

<!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>

Answer 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>

在div中拖放列表元素

1 个答案: