sự kiện jsTree dnd không kích hoạt

Question

Tôi đang cố gắng nắm bắt các sự kiện dnd trong jsTree 3.0.0. Tôi đã sử dụng mã demo để tạo các trình xử lý sự kiện. Cây xây dựng tốt, nhưng các sự kiện không bao giờ cháy. Tôi đang thiếu gì?

Đây là phần thích hợp. JSON hoạt động tốt và xây dựng chính cây tìm thấy. Tuy nhiên, các cuộc gọi console.log không bao giờ xảy ra khi tôi kéo và thả trên cây.

<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>     

Answer 1

Sự kiện chỉ được kích hoạt trên "tài liệu". Hãy thử điều này:

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

Nó hoạt động!

Answer 2

Trong tài liệu https://www.jstree.com/api/#/?q=event&f=dnd_start.vakata

Chia sẽ sự kiện (dnd_start, dnd_move, dnd_stop) được kích hoạt trên tài liệu, chứ không phải trên cây.

Các sự kiện này khác với sự kiện "move_node.jstree", sự kiện này chỉ được gọi vào cuối Drag & Thả (tương đương với sự kiện thả).

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