JsTree v3.0 拖放插件。放置时参考目标节点答案

【问题标题】：JsTree v3.0 drag and drop plugin. Reference target node upon droppingJsTree v3.0 拖放插件。放置时参考目标节点
【发布时间】：2014-04-06 10:41:20
【问题描述】：

我使用jsTree库的拖放插件（版本3.0）使用以下代码，我可以绑定到拖放操作的末尾，但我看不到获取对目标节点（我要放置的节点）的引用的方法。

$(document).on('dnd_stop.vakata', function(e, data) {
   // how to get target_node here?
});

【问题讨论】：

标签： javascript drag-and-drop jstree

【解决方案1】：

我有同样的问题。我找到了除事件 dnd_stop.vakata 之外的其他解决方案，它在更改位置之前返回旧数据。

这行得通：

$('#jstree_demo_div').on("move_node.jstree", function (e, data) {
   //data.node, data.parent, data.old_parent is what you need

   //console.log(data);
   alert(data.node.id);
   alert(data.parent);
});

【讨论】：

【解决方案2】：

另一种解决方案是在 jstree 对象上使用 get_node() 函数。

$(document).on('dnd_stop.vakata', function (e, data) {
    ref = $('#jstree').jstree(true);
    parents = ref.get_node(data.element).parent;
});

您可以让所有父母：

    all_parents = ref.get_node(data.element).parents;

【讨论】：

请将此标记为解决方案。它完全在 JSTree 的范围内，不需要额外的 JQuery 使用。
这将为您提供可拖动对象的来源节点，但不提供拖放对象的节点。

【解决方案3】：

我遇到了同样的问题，必须在 dnd_stop 事件中获取 ID，所以我想出了这个：

$(document).on('dnd_stop.vakata', function(e, data) {
  var t = $(data.event.target);
  var targetnode = t.closest('.jstree-node');
  var nodeID = targetnode.attr("id");
});

这样我就可以得到目标节点的ID，例如。

【讨论】：

【解决方案4】：

$(document).on('dnd_stop.vakata', function(e, data) {
    var inst = $.jstree.reference('#jstree');
    console.log("END DROP:");
    var sourceID = data.data.nodes[0];
    console.log("Source ID: " + sourceID);
    var targetNode = inst.get_node(data.event.target, true);
    var targetID = targetNode[0].id;
    console.log("Target ID: " + targetID);
});

【讨论】：

这让我很接近。为了获取原始的targetNode数据，我使用了 inst.get_node(data.event.target, false);
当您在最后一项之后删除节点时，这会返回错误的父节点。最后一项返回es目标，但应该是父节点。

【解决方案5】：

如果您需要通过 check_callback 执行此操作，则可以通过 more 参数访问目标节点。

'check_callback': function(operation, node, node_parent, node_position, more) {


    // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
    // in case of 'rename_node' node_position is filled with the new node name


    if (operation === "move_node") {

        if (more.ref.data.type === "folder") {

            return true;

        } 

    }

    return false; //allow all other operations

}

【讨论】：

【解决方案6】：

要获取目标节点，请使用 dnd_stop.vakata 事件。获得节点后，您可以访问不同的属性，例如 id:

$(document).bind("dnd_stop.vakata",function(e, data) {
    var targetNode = $('#jstree').jstree(true).get_node($(data.event.target));
    var nodeId = targetNode.id;
});

【讨论】：

【解决方案7】：

你只需要打电话：

'check_callback': function(operation, node, node_parent, node_position, more) {
  // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'

  if (operation === "move_node") {
      var node = more.origin.get_node('fiche-1');
      return true;
  }

  return true; //allow all other operations
}

【讨论】：

【解决方案8】：

文档准备好后绑定监听器：

$(document).ready(function() {
    $(document).on('dnd_stop.vakata', function (e, data) {
        let ref = $.jstree.reference("#jstree");
        let nodes = data.data.nodes.map(node_id => ref.get_node(node_id));
        let parent_node_id = nodes[0].parent;
        let parent = ref.get_node(parent_node_id);
    });
});

jstree 有一个用于执行 ui 逻辑的 dnd_stop.vakata.jstree 的内部侦听器。它设置在 $(function() {...}) 内，即当文档准备好时。如果在 jstree 之前绑定自定义函数，则在执行 ui 逻辑之前获取父函数。

【讨论】：