Question

我有一棵树，在这里我需要能够将节点相互拖动，以形成树形文件夹结构。

我已经通过

解决了这个问题

function initDNDCategory() {
    let dragelmnt = $('#realplantree').find('ul.ui-treenode-children').find('.ui-treenode-icon');
    dragelmnt.draggable({
       helper: 'clone',
       scope: 'treetotree',
       zIndex: ++PrimeFaces.zindex
    });

    jQuery('.ui-treenode-icon').droppable({
       helper: 'clone',
       scope: 'treetotree',
       activeClass: 'la-ui-state-active',
       hoverClass: 'la-ui-state-highlight',
       tolerance : "pointer",
       greedy: true,
       drop: function(event, ui) {
           console.log(event, ui)
           moveCategory([
               {name: 'dragid', value:  ui.draggable[0].parentNode.parentNode.dataset.rowkey},
               {name: 'dropid', value:  event.target.parentNode.parentNode.dataset.rowkey}
           ]);
       }
    });
}

在另一个视图中，我有一些文档，需要将它们放在树中的文件夹上，以便更新其路径。

我是这样做的

function initDNDPlan() {
    let dragelmnt = $('.dragplan');
    dragelmnt.draggable({
       helper:function(){
           return $("<div></div>").append($(this).find('.curriculum-plan-main h2').clone());
       },
       cursorAt:{
            top: 2,
            left: 2
    },
       scope: 'plantotree',
       zIndex: ++PrimeFaces.zindex
    });

  jQuery('.ui-treenode-label').droppable({
       helper: 'clone',
       scope: 'plantotree',
       activeClass: 'la-ui-state-active',
       hoverClass: 'la-ui-state-highlight',
       tolerance : "pointer",
       greedy: true,
       drop: function(event, ui) {
         console.log(event, ui)
           movePlan([
               {name: 'dragid', value:  ui.draggable[0].childNodes[3].id},
               {name: 'dropid', value:  event.target.parentNode.parentNode.dataset.rowkey}
           ]);
       }
    });
  jQuery('.curriculum-category-card').droppable({
      helper: 'clone',
      scope: 'plantotree',
      activeClass: 'la-ui-state-active',
      hoverClass: 'la-ui-state-highlight',
      tolerance : "pointer",
      greedy: true,
      drop: function(event, ui) {
        console.log(event, ui)
          movePlan([
              {name: 'dragid', value:  ui.draggable[0].childNodes[3].id},
              {name: 'dropbox', value:  event.target.id}
          ]);
      }
   });
}

我必须对jQuery droppable使用不同的选择器（在第一个示例中，我将其放置在图标上，在另一个示例中，我将其放置在标签上。如果我同时使用了标签，则无法删除类别在第一个示例中，它看起来不太好。我在这里误解了什么？

jQuery可拖放多个可拖动

0 个答案: