将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中的节点(icon+text)。但这不是我想要的。我只想在事件中获得节点的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 
      }}});});