嵌套下降不会触发

Question

我正在建立一个普通的javascript（没有jQuery）的分类标准管理器，这需要节点（LI元素）的一部分可以被拖拽并变成另一个LI上的子元素。我动态创建了一个“Child”UL，并创建了一个占位符LI，并将一组嵌套事件侦听器附加到UL以处理“拖放”部分。可悲的是，“dragover”正常工作，并且正在解雇，但“drop”事件并非如此。我错过了什么？

我在下面粘贴了我的代码，但它相当多！我有codepen here的完整源代码。

TaxonomyManager.prototype.attachDragDropEventListeners = function() { 
    var manager = this; 
    [].forEach.call(this._nodes, function(item) { 
     item.draggable = true; 
     item.addEventListener('dragstart', dragStartHandler, false); 
     item.addEventListener('dragover', dragOverHandler, false); 
     item.addEventListener('dragleave', dragLeaveHandler, false); 
     item.addEventListener('drop', dropHandler, false); 
     item.addEventListener('dragend', dragEndHandler, false); 

     manager._dragSource = null; 

     function dragStartHandler(e) { 
     manager._dragSource = this; 
     e.dataTransfer.effectAllowed = 'move'; 
     e.dataTransfer.setData('text/html', this.innerHTML); 
     } 

     function dragOverHandler(e) { 
     if (e.preventDefault) { 
      e.preventDefault(); // Necessary. Allows us to drop. 
     } 
     removeNewSubTaxonomyPlaceholder(); 
     if ((this.children.length === 0) && (manager._dragSource !== this)) { 
      var ul = document.createElement('UL'); 
      ul.classList.add('new-sub-taxonomy'); 
      ul.draggable = true; 
      ul.addEventListener('dragstart', dragStartHandler, false); 
      ul.addEventListener('dragover', dragOverPlaceholderHandler, false); 
      ul.addEventListener('dragleave', dragLeaveHandler, false); 
      ul.addEventListener('drop', dropPlaceholderHandler, false); 
      ul.addEventListener('dragend', dragEndHandler, false); 

      var li = document.createElement("LI"); 
      li.classList.add('new-sub-taxonomy-placeholder'); 

      var liText = document.createTextNode("Drop here"); 
      li.appendChild(liText); 
      ul.appendChild(li); 
      this.appendChild(ul);   
     } 
     e.dataTransfer.dropEffect = 'move'; 
     return false; 
     } 

     function dragLeaveHandler(e) { 
     return false; 
     } 

     function dropHandler(e) { 
     if (e.stopPropagation) { 
     e.stopPropagation(); // stops the browser from redirecting. 
     } 

     if (manager._dragSource !== this) { 
      var temp = document.createElement("li"); 
      manager._dragSource.parentNode.insertBefore(temp, manager._dragSource); 
      this.parentNode.insertBefore(manager._dragSource, this); 
      temp.parentNode.insertBefore(this, temp); 
      temp.parentNode.removeChild(temp); 
     } 
     return false;  
     } 

     function dragEndHandler(e) { 
     removeNewSubTaxonomyPlaceholder(); 
     return false; 
     } 

     function dragOverPlaceholderHandler(e) { 
     if (e.preventDefault) { 
      e.preventDefault(); // Necessary. Allows us to drop. 
     } 
     console.log('this fires'); 
     e.dataTransfer.dropEffect = 'move'; 
     return false; 
     } 

     function dropPlaceholderHandler(e) { 
     console.log('this does not fire'); 
     if (e.stopPropagation) { 
     e.stopPropagation(); // stops the browser from redirecting. 
     } 


     manager.addLeaf(manager._dragSource.firstChild, this.parentNode.parentNode.dataset.id); 
     manager.renderTree(); 


     return false; 
     } 

     function removeNewSubTaxonomyPlaceholder() { 
      var placeholder = document.querySelector('.new-sub-taxonomy'); 
      if (placeholder) { 
      placeholder.parentNode.removeChild(placeholder); 
      } 
     } 
    }); 
}; 

Answer 1

基本上这个问题是我需要更多的e.stopPropagation()和e.preventDefault()语句添加到dragover和drop事件处理这两者都迷上了这些事件的父和子节点。

我想这就是你在凌晨3点编码得到的！

Answer 2

看看这个：GITHUB link

jQuery的JS链接：https://github.com/ilikenwf/nestedSortable/blob/2.0alpha/jquery.mjs.nestedSortable.js

一些自定义的常用的功能

disableParentChange（2.0） 设置为真详情锁定项目的父母。他们只能在当前父容器内重新排序。

doNotClear（2.0） 如果您不想清空空列表，请将其设置为true。默认值：false

expandOnHover（2.0） 多久（毫秒）扩大在折叠节点（仅当isTree有用：真）之前等待。默认值：700

isAllowed（function） 您可以指定自定义函数来验证是否允许放置位置。默认值：function（placeholder，placeholderParent，currentItem）{return true; }

isTree（2.0） 如果您要使用新的树功能，请将其设置为true。默认值：false