嵌套 Drop 不会触发

Question

我正在用纯 javascript（没有 jQuery）构建分类管理器，其中一部分要求节点（LI 元素）可以拖动并变成另一个 LI 上的子元素。我动态创建了一个“子”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

看看这个：GITHUB link

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

使用函数的一些自定义细节

disableParentChange (2.0) 将此设置为 true 以锁定项目的父级。它们只能在当前父容器中重新排序。

doNotClear (2.0) 如果您不想删除空列表，请将其设置为 true。默认值：假

expandOnHover (2.0) 在展开折叠节点之前等待多长时间（以毫秒为单位）（仅在 isTree: true 时有用）。默认值：700

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

isTree (2.0) 如果要使用新的树功能，请将其设置为 true。默认值：假

Answer 2

基本上，问题是我需要在关联到这些事件的父节点和子节点上的dragover 和drop 事件处理程序中添加更多e.stopPropagation() 和e.preventDefault() 语句。

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