Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jstree 3 get the position where the target got dropped

I have created this

http://jsfiddle.net/n82vvvo6/

jQuery(function($) {
    $(document).on('dnd_stop.vakata', function(e, data) {
        var origin = $(data.element);
        var target = $(data.event.target);
        // Missing something here to get if the origin is before or after the target

        $('#result').html(
            '<div><b>Target:</b> ' + target.html() + '</div>' + 
            '<div><b>Origin:</b> ' + origin.html() + '</div>'
        );
    })

    $('#jstree_demo').jstree({
      "core" : {
        "check_callback" : true,
        "themes" : { "stripes" : true },
      },
      "plugins" : [
        "dnd"
      ]
    });
});

Now if I move fx 1-5 to the top, the target is 1-1 but if I move fx 1-5 to the bottom, the target is 1-8

Is there any method where I can find out if the origin is before or after the target?

like image 356
Martin- Avatar asked Dec 03 '14 13:12

Martin-


1 Answers

This may be a little different then your direct question but this is how I solved the issue of figuring out the position of the drop. After the 'dnd_stop.vakata' is called the 'move_node.jstree' event is called which does contain the item being moved, old parent, new parent, and index point the item is to be dropped.

$('#AdminTree').on("move_node.jstree", function (e, data) {

        //item being moved                      
        var moveitemID = $('#' + data.node.id).find('a')[0].id;            

        //new parent
        var newParentID = $('#' + data.parent).find('a')[0].id;

        //old parent
        var oldParentID = $('#' + data.old_parent).find('a')[0].id;

        //position index point in group
        //old position
        var oldPostionIndex = data.old_position;
        //new position
        var newPostionIndex = data.position;
    });
like image 60
Matthew Halle Avatar answered Nov 10 '22 07:11

Matthew Halle