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

Question

我正在为此开启一个新问题，虽然这是基于我一直在做的工作Is it possible to drag and drop external data into a jstree?

因此，根据上面的帖子，我有一个jstree，并使用jquery-UI将列表项从外部<div>拖放到我的树上。 背景信息：当我打开原始帖子时，我的计划是一次性使用“保存”按钮保存整个树。但是我已对其进行了全部修改，因此每次交互都会触发ajax请求以保存/更新存储树的数据库。

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

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

使用小提琴代码作为示例，可以拖动的数据由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上运行。如果我要从#tagList拖出“英国”并将其放在#tree下面，例如“位置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');
    }
}

这不起作用（将console.log()放到#tree上时不会$(document).on('dnd_stop.vakata', function(e, data) { ... });。我甚至不知道我是否正确地采用这种方式，或者如果jstree本身有什么东西可以使这更容易。如上所述，我在文档中看不到它。

我还看了How to drag a node from a div and drop it on to a JStree? (jstree version: 3.0.4)专门尝试使用#tree。这个问题是它适用于#tagList上的其他互动，例如重新排序。它并非特定于从public static function floatToStringPrecision(n:Float,prec:Int) { if(n==0) return "0." + ([for(i in 0...prec) "0"].join("")); //quick return var minusSign:Bool = (n<0.0); n = Math.abs(n); var intPart:Int = Math.floor(n); var p = Math.pow(10, prec); var fracPart = Math.round( p*(n - intPart) ); var buf:StringBuf = new StringBuf(); if(minusSign) buf.addChar("-".code); buf.add(Std.string(intPart)); if(fracPart==0) { buf.addChar(".".code); for(i in 0...prec) buf.addChar("0".code); } else { buf.addChar(".".code); p = p/10; var nZeros:Int = 0; while(fracPart<p) { p = p/10; buf.addChar("0".code); } buf.add(fracPart); } return buf.toString(); } 拖放。

我不知道从这里可以去哪里，并希望得到任何意见。

jstree版本是3.2.1，jquery 1.12.4和jqueryUI 1.12.1

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