jstree移动，拖放答案

【问题标题】：jstree move, drag and dropjstree移动，拖放
【发布时间】：2012-05-07 17:57:00
【问题描述】：

我想在 jstree 中实现一个节点的移动功能。是需要执行的移动还是拖放？此外，拥有将容器绑定到事件和事件代码的工作代码会很好。

【问题讨论】：

标签： jstree

【解决方案1】：

如果你不需要强制任何移动规则，你只需要使用 dnd 插件（不允许某些节点移动到其他节点等）如果需要强制执行移动规则，可以添加 crrm 插件。

请参阅 dnd pluign 文档的 Reorder only demo 以获取此示例。文档很差，因此您必须使用浏览器上的开发人员工具来查看check_move 回调的参数属性是什么。对于文档中的示例，m.o 指的是您拖动的节点，m.r 指的是您的目标节点。

您可能还需要在移动节点时收到通知，因此请在初始化树时绑定到move_node.jstree 事件：

$("#treeHost").jstree({
   // ...
}).bind("move_node.jstree", function (e, data) {
    // data.rslt.o is a list of objects that were moved
    // Inspect data using your fav dev tools to see what the properties are
});

【讨论】：

截至 2014 年 2 月，该插件的 v3 中似乎已删除 crrm 插件。。 .考虑到这种限制，有关如何使用条件放置目标的任何提示？
我们现在是否应该将 Types 插件与 DnD 结合使用来完成以前在 CRRM 中的功能？

【解决方案2】：

$("#demo1").jstree({
....
.bind("move_node.jstree", function (e, data) {

    /*
    requires crrm plugin

    .o - the node being moved
    .r - the reference node in the move
    .ot - the origin tree instance
    .rt - the reference tree instance
    .p - the position to move to (may be a string - "last", "first", etc)
    .cp - the calculated position to move to (always a number)
    .np - the new parent
    .oc - the original node (if there was a copy)
    .cy - boolen indicating if the move was a copy
    .cr - same as np, but if a root node is created this is -1
    .op - the former parent
    .or - the node that was previously in the position of the moved node */

    var nodeType = $(data.rslt.o).attr("rel");
    var parentType = $(data.rslt.np).attr("rel");

    if (nodeType && parentType) {
        // TODO!
    }
})
});

【讨论】：

【解决方案3】：

上述方法不适用于最新版本的 jstree（截至今天为 3.3.7）。

Bojin's answer 的第一行仍然成立。要实现规则，您可以使用core.check_callback 或可能的types 插件； crrm 插件不再存在。绑定到move_node.jstree 以在完成移动（放下）时执行一些操作。默认情况下，除了移动节点之外，dnd 插件还允许重新排序（在两个节点之间放置）和复制（Ctrl + 拖动）。下面的代码 sn-p 显示了如何禁用这些附加行为。

$('#treeElement').jstree({
    'core': {
        'check_callback': CheckOperation,
        ...
    },
    'plugins': ['dnd']
})
.bind("move_node.jstree", function(e, data) {
    //data.node was dragged and dropped on data.parent
});

function CheckOperation(operation, node, parent, position, more) {
    if (operation == "move_node") {
        if (more && more.dnd && more.pos !== "i") { // disallow re-ordering
            return false;
        }
        ... more rules if needed ...
        else {
            return true;
        }
    }
    else if (operation == "copy_node") {
        return false;
    }
    return true;
}

【讨论】：