jsTree drag and drop is not always working

Question

Dragging a node into a new location doesn't always stick. My code is like

    $("#product-category-tree").jstree({
        "plugins":["themes", "html_data", "dnd"], 
        "themes":{
            "icons": false,
            "dots": false
        }
    }).bind("move_node.jstree", function(e , data){
        data.rslt.o.each(
            function(i){
                $.ajax({
                    type: 'PUT',
                    url: '/product_categories/move',
                    data: {
                        "operation" : "move_node",
                        'drag_id' : $(this).data("id"),
                        'drop_id' : data.rslt.np.data("id"),
                        'index' : data.rslt.cp + i
                    },
                    success: function(r){
                        if (r != 'success'){
                            alert(r);
                            $.jstree.rollback(data.rlbk);
                        }
                    }
                });
            }
        )
    })

Answer 1

There is an open issue (#174) on project's GitHub page. You can find quite a few workarounds there.

I've used this one, which is the least intrusive, but limited to modern browsers:

#jstree-marker-line {
    pointer-events: none;
}