jqueryUI 和 jstree - 查找已删除元素的父级 ID答案

【问题标题】：jqueryUI and jstree - Finding ID of parent where an element has been droppedjqueryUI 和 jstree - 查找已删除元素的父级 ID
【发布时间】：2018-01-08 16:22:11
【问题描述】：

我正在为此提出一个新问题，尽管它基于我在 Is it possible to drag and drop external data into a jstree? 周围所做的工作

因此，根据上面的帖子，我有一个 jstree，并且正在使用 jquery-UI 将列表项从外部 <div> 拖放到我的树上。

（背景信息：当我打开原始帖子时，我的计划是使用“保存”按钮一次性保存整个树。但是我已经对其进行了全部修改，因此每次交互都会触发一个 ajax 请求以保存/更新数据库存储树）。

回复上一篇帖子的人创造了一个小提琴：https://jsfiddle.net/Twisty/dLv7xk3t/9/

我要做的是在将项目放到树上之后获取树中父节点的 ID。

以fiddle代码为例，可以拖动的数据由ID为#tagList的div内的列表项组成：

<div id="tagList">
  <ul>
    <li data-tag="1" id="uk-1">United Kingdom</li>
    <li data-tag="2" id="france-1">France</li>
    <li data-tag="3" id="germany-1">Germany</li>
  </ul>
</div>

树在 ID 为 #tree 的 div 上运行。如果我将“United Kingdom”从#tagList 拖放到#tree 下面，例如“Location 2”，它看起来像这样：

我需要做的是在删除“英国”后获取“位置 2”（父级）的 ID。在这种情况下，ID 将是#loc2。我还需要知道被移动元素的 ID，“United Kingdom”，即#uk-1_anchor。

jstree 文档很差，不出所料，设计时并没有考虑到这个特定的用例！我考虑过使用 jquery-UI 的droppable 方法来查看是否可以检测到何时将列表项放入#tree，例如：

$( "#tree" ).droppable({
    accept: ".ui-draggable",
    activeClass: "draghover",
    drop: function( event, ui ) {
        console.log('dropped');
    }
}

这不起作用（在将某些东西放到#tree 上时它不会执行console.log()）。我什至不知道我是否以正确的方式进行此操作，或者 jstree 本身是否有某些东西可以使这更容易。如前所述，我在文档中看不到它。

我还查看了How to drag a node from a div and drop it on to a JStree? (jstree version: 3.0.4)，专门尝试使用$(document).on('dnd_stop.vakata', function(e, data) { ... });。问题在于它适用于#tree 上的其他交互，例如重新排序。并非特定于从#tagList拖放。

我可以从这里去哪里？

jstree 版本为 3.2.1，jquery 1.12.4 和 jqueryUI 1.12.1

【问题讨论】：

标签： jquery html jquery-ui jstree

【解决方案1】：

在dnd_stop.vakata 事件中，您有足够的信息来检查要删除的元素是来自 jstree 还是其他东西。该事件的构建很像许多 jquery-ui 事件，这意味着您有 ui 参数，它是一个包含有关事件信息的对象。所以你有element，它告诉你哪个元素被删除，target，告诉你它被删除的位置。从那里开始，这样的事情应该可以让您进行适当的验证：

$(document).on('dnd_stop.vakata', function(e, ui) {
    if (ui.element.classList.contains('ui-draggable')) {
       console.log($(ui.event.target).closest('[aria-level=1]').attr('id'));
    }
});

https://jsfiddle.net/5g1kkapb/3/

【讨论】：