События jsTree dnd не срабатывают

Я пытаюсь зафиксировать события dnd в jsTree 3.0.0. Я использовал демонстрационный код для создания обработчиков событий. Дерево строится нормально, но события никогда не срабатывают. Что мне не хватает?

Это важная часть. JSON отлично работает и строит само дерево find. Однако вызовы console.log никогда не возникают, когда я перетаскиваю дерево.

<link href="/jquery/jquery-ui-1.10.3/css/ui-lightness/jquery-ui-1.10.3.custom.min.css" rel="Stylesheet"/>
<script src="/jquery/jquery-ui-1.10.3/js/jquery-1.9.1.js"/>
<script src="/jquery/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.min.js"/>
<link href="/jquery/plugins/jsTree/themes/default/style.min.css" rel="stylesheet"/>
<script src="/jquery/plugins/jsTree/jstree.js"/>
<script>
    $(function () {
        $('#jstree')
        // listen for events
        .on('dnd_start.vakata', function (e, data) {
            console.log('Dragged');
        })
        .on('dnd_stop.vakata', function (e, data) {
            console.log('Dropped');
        })
        // create the instance
        .jstree({
            "core" : {
                "check_callback" : true,
                'data' : {                              
                    'url' : 'categoriesJson.pm?json=1',
                    'data' : function(node) {
                        console.log (node);
                        return {
                            'id' : node.id
                        }
                    }
                },
                "themes" : {
                    "stripes" : true
                }
            },
            "plugins" : [ "dnd" ]
        });

        $(document).bind("drag_stop.vakata", function (e, data) {
            if (data.data.jstree) {
                console.log('User stopped dragging');
            }
        });                 
    });
</script>

drag-and-drop jstree
person GeoJunkie    schedule 29.04.2014    source источник
comment
Хорошо, я обнаружил, что вместо этого срабатывает событие move_node. Итак, это работает: .on('move_node.jstree', function (e, data) { console.log('Moved'); }) Тем не менее любопытно, почему события ваката в документах не работают.   -  person GeoJunkie    schedule 29.04.2014

Ответы (2)


arrow_upward
22
arrow_downward

Событие запускается только для «документа». Попробуй это:

$(document).on('dnd_start.vakata', function (e, data) {
    console.log('Started');
});

Оно работает!

person Sandro Stadler    schedule 08.08.2014

arrow_upward
10
arrow_downward

В документации https://www.jstree.com/api/#/?q=event&f=dnd_start.vakata

События DnD (dnd_start, dnd_move, dnd_stop) запускаются для документа, а не для дерева.

Эти события отличаются от события «move_node.jstree», которое вызывается только в конце Drag & Drop (эквивалентно событию Drop).

$(document).bind("dnd_start.vakata", function(e, data) {
    console.log("Start dnd");
})
.bind("dnd_move.vakata", function(e, data) {
    console.log("Move dnd");
})
.bind("dnd_stop.vakata", function(e, data) {
    console.log("Stop dnd");
});
$("#tree").jstree({
    // tree...
}).bind("move_node.jstree", function(e, data) {
   console.log("Drop node " + data.node.id + " to " + data.parent);
});
person Lia Stk    schedule 18.03.2016