CODEWITHSUNDEEP
javascriptjquerytreeviewjstreejstree-dnd
Randika
Randika

Reputation: 753

Drag and drop not working when sorted in JsTree

I am using JsTree library for generate tree view using following JSON object.

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":[]}];

I am trying to sort the tree view nodes using "order-num" value and then manually change the sort order by drag and drop. Drag and drop must be allowed only within the dragging node's first parent UL. But the problem is when sorted, drag and drop doesn't work. Here is my JsTree code.

$('#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;
        }
});

Upvotes: 0

Views: 1269

Answers (1)

FreeLightman
FreeLightman

Reputation: 2304

As this solution https://groups.google.com/forum/#!topic/jstree/nn5GaA6WhXE did not work for me I found another one. It is not perfect but it worked for me.

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

The trick is to disable sorting after initial rendering. This is what the code does. After tree was rendered sort is not longer needed. So just put empty function in sort.

Make sure to place this code before $('.jstree').jstree().

Upvotes: 1

Related Questions