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能够达到像这样的目的

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

我不想将节点从树移动到任何地方，我只是想将节点的id拖放到div中。但我的问题是，甚至没有让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 
      }}});});

将JSTree节点拖到外部div中

1 个答案: