将 JSTree 节点拖入外部 div

Question

我正在使用 Jquery jsTree 将数据加载到带有 json 的 jstree 中。下面是我的代码来填充我的 jsTree

  $.ajax({
           async: true,
           type: "POST",
           url: "MasterPageDataService.asmx/GetAllSites",
           dataType: "json",
           contentType: "application/json; charset=utf-8",
           success: function (jsonData) {
           $("#divSitesTree").jstree({
                'core': {
                'data': jsonData
                 },
                "plugins": ['dnd', "themes", "json_data", "ui"]
               });},
           });

我得到了完美填充的数据。

现在我想拖动一个节点并将其放到 div 元素上。我已经让我的 div drop 能够达到这样的目的

  $(".droppable").droppable({
            drop: function (event, ui) {
                alert('dropped');
                // here i want the id of dropped node
            }
        }); 

我不想将节点从树移动到任何地方，我只想获取被拖放到 div 中的节点的 id。但我的问题是我什至没有让 drop 事件被触发。例如，我根本没有收到任何警报。

到目前为止，我已经搜索了不同的解决方案并尝试了这个。

<script>
   $(function () {
   $('.drag')
   .on('mousedown', function (e) {
   return $.vakata.dnd.start(e, { 'jstree': true, 'obj': $(this),    'nodes': [{ id: true, text: $(this).text() }] }, '<div id="jstree-dnd" class="jstree-default"><i class="jstree-icon jstree-er"></i>' + $(this).text() + '</div>');
            });
        $(document)
            .on('dnd_move.vakata', function (e, data) {
                var t = $(data.event.target);
                if (!t.closest('.jstree').length) {
                    if (t.closest('.drop').length) {
                        data.helper.find('.jstree-icon').removeClass('jstree-er').addClass('jstree-ok');
                    }
                    else {
                        data.helper.find('.jstree-icon').removeClass('jstree-ok').addClass('jstree-er');
                    }
                }
            })
            .on('dnd_stop.vakata', function (e, data) {
                var t = $(data.event.target);
                if (!t.closest('.jstree').length) {
                    if (t.closest('.drop').length) {
                    $(data.element).clone().appendTo(t.closest('.drop'));
                    }
                }
            });
    });
</script>

但它只是在我的 div 中附加节点（图标+文本）。但这不是我想要的。我只想在一个事件中获取节点的 ID，在该事件中我可以根据节点的 ID 执行进一步的操作。

如何使用 jsTree 完成这项任务？请帮忙。

Answer 1

幸运的是，我找到了解决方案。下面是获取被拖动节点的id和被拖放节点的目标的id的脚本

 $(document)
   .on('dnd_stop.vakata', function (e, data) {
    var t = $(data.event.target);
      if (!t.closest('.jstree').length) {
        if (t.closest('.drop').length) {
           alert(data.data.origin.get_node(data.element).id);//node id
           alert(data.event.target.id) //target id 
      }}});});