在 JsTree 中排序时拖放不起作用答案

【问题标题】：Drag and drop not working when sorted in JsTree在 JsTree 中排序时拖放不起作用
【发布时间】：2018-03-19 06:09:44
【问题描述】：

我正在使用 JsTree 库使用以下 JSON 对象生成树视图。

var data = [{"id":1,"parent":"#","text":"Items for Sale","icon":"fa fa-folder","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":1},"a_attr":[]},{"id":2,"parent":"#","text":"Service","icon":"fa fa-folder","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":2},"a_attr":[]},{"id":3,"parent":"#","text":"Vacancies","icon":"fa fa-folder","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":3},"a_attr":[]},{"id":4,"parent":"#","text":"Rent Property or Vehicle","icon":"fa fa-folder","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":4},"a_attr":[]},{"id":5,"parent":8,"text":"Electronics","icon":"fa fa-file","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":2},"a_attr":[]},{"id":6,"parent":8,"text":"Cars and Vehicles","icon":"fa fa-file","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":1},"a_attr":[]},{"id":7,"parent":1,"text":"Property","icon":"fa fa-file","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":1},"a_attr":[]},{"id":8,"parent":1,"text":"Home and Gardens","icon":"fa fa-file","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":2},"a_attr":[]},{"id":9,"parent":1,"text":"Fassion Health and Beauty","icon":"fa fa-file","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":3},"a_attr":[]},{"id":10,"parent":1,"text":"Hobbies Sports and Kids","icon":"fa fa-file","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":4},"a_attr":[]},{"id":14,"parent":2,"text":"Trade Services","icon":"fa fa-file","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":1},"a_attr":[]},{"id":15,"parent":2,"text":"Domestic Service","icon":"fa fa-file","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":2},"a_attr":[]},{"id":16,"parent":2,"text":"Events and Entertainment","icon":"fa fa-file","state":{"opened":true,"disabled":false,"selected":false},"li_attr":{"order-num":3},"a_attr":[]}];

我正在尝试使用 "order-num" 值对树视图节点进行排序，然后通过拖放手动更改排序顺序。拖放必须只允许在拖动节点的第一个父 UL 内。但问题是排序时，拖放不起作用。这是我的 JsTree 代码。

$('#categories-wrapper').jstree({
        'core': {
            'data': data,
            "check_callback": true
        },
        "plugins": ["dnd", "sort"],
        'sort': function (a, b) {
            a1 = this.get_node(a);
            b1 = this.get_node(b);

            return (a1.li_attr['order-num'] > b1.li_attr['order-num']) ? 1 : -1;
        }
});

【问题讨论】：

您正在寻找的确切行为是什么？似乎排序干扰了拖放；如果我禁用排序，我可以在第一个 ul 中拖放（虽然我不认为你想要这个）。我创建了一个工作小提琴：jsfiddle.net/uq26jqwh/4
@JonathanChaplin，谢谢。我还需要通过仅在拖动节点的第一个父 ul 内拖放节点来手动更改节点顺序。我编辑了问题以解释我正在寻找的确切行为。
试试这个：groups.google.com/forum/#!topic/jstree/nn5GaA6WhXE

标签： javascript jquery treeview jstree jstree-dnd

【解决方案1】：

由于这个解决方案https://groups.google.com/forum/#!topic/jstree/nn5GaA6WhXE 对我不起作用，我找到了另一个解决方案。它并不完美，但对我有用。

$('.jstree').on('ready.jstree', (e, data) => {
   data.instance.sort = () => {};
});

诀窍是在初始渲染后禁用排序。这就是代码的作用。渲染树后不再需要排序。所以只需将空函数放入sort。

确保将此代码放在$('.jstree').jstree() 之前。

【讨论】：