个人中心
gpt4 book ai didi

javascript - 在 div 中拖放列表元素

转载 作者：行者123 更新时间：2023-11-27 22:56:30 24 4
gpt4 key购买 nike

我正在制作在线编辑应用程序。单击左侧导航栏上的按钮可创建列表项。我想使用拖放事件在 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>

最佳答案

问题与拖动 功能有关，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>

关于javascript - 在 div 中拖放列表元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59227412/

24 4 0
文章推荐： html - 级联样式表属性阻止 href 工作
文章推荐： javascript - 使用 Javascript 从 Selenium::Remote::Driver 包恢复 Windows "Confirm Box"
文章推荐： c++ - 与 glut : "undefined reference to..." 相关的问题
文章推荐： html - 使用 CSS 网格的动态行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com