jQuery Draggable - 滾動容器以外的其他容器

Question

所以我有一個無序的拖拽列表，我想拖入另一個無序的可拖拽列表。如果我克隆可拖動並將其附加到「body」，那麼我可以將它拖出它的容器並放到另一個列表中的可拖拽元素上，但它不會自動滾動可拖拽的無序列表。如果我克隆並追加到另一個無序列表中，它將自動滾動可拖拽列表，但拖拽元素直到它懸停在可拖拽列表上時不可見。有沒有人知道解決方法或更好的方法來解決這個問題？

撥弄這裏代碼：https://jsfiddle.net/bkfxjnom/6/ 可拖動代碼：

$('.draggable').draggable({ 
    helper: 'clone', 
    appendTo: "body", 
    zIndex: 100, 
    refreshPositions: true, 
    revert: 'invalid', 
    start: function(event, ui) { 
     $(this).css('visibility', 'hidden'); 
    }, 
    stop: function(event, ui) { 
     $(this).css('visibility', 'visible'); 
    } 
    }); 

投擲的名單HTML：

<ul class="list-group" id="root" style="overflow-y:scroll; height: 150px"> 

    <li class="list-group-item category-droppable" id="level1"> 
     <span class="glyphicon glyphicon-chevron-right"></span>FirstLvL 
     <ul class="list-group" id="level1"> 

     <li class="list-group-item category-droppable" id="level2"> 
      <span class="glyphicon glyphicon-chevron-right"></span>SecondLvL 
      <ul class="list-group" id="level2"> 

      <li class="list-group-item category-droppable" name="A" id="level3">A</li>+++ many li elements 

      </ul> 
     </li> 

     </ul> 
    </li> 

    </ul> 

提前感謝！

Answer 1

所以我最終使用的解決方法是將克隆附加到我想要滾動的容器，並將其包含在那裏。 然後，我做了另一個克隆，我用鼠標拖動，其中絕對定位。一種哈克解決方案，但它的工作原理。

   $('.draggable').draggable({ 
        scrollSensitivity: 35, 
        scrollSpeed: 28, 
        containment: "#root", 
        helper: "clone", 
        appendTo: "#root", 
        zIndex: 5000, 
        refreshPositions: true, 
        start: function (event, ui) { 
         parent = $(this); 
         $(this).css('visibility', 'hidden'); 
         $(ui.helper).css('visibility', 'hidden'); 
         clone = $(this).clone(); 
         clone.addClass("ui-draggable-dragging"); 
         clone.css('visibility', 'visible'); 
         clone.css("position", "absolute"); 
         clone.css("z-index", 5001); 
         clone.prependTo($(".dragging-area")); 
         $("#unprocessed_list").droppable("disable"); 
        }, 
        stop: function (event, ui) { 
         clone.animate($(this).offset(), 500); 
         setTimeout(function() { clone.remove(); parent.css('visibility', 'visible'); }, 500); 
         $("#unprocessed_list").droppable("enable"); 

        }, 
        drag: function (event, ui) { 
         clone.offset({ top: event.pageY - clone.height(), left: event.pageX - clone.width()/2 }); 
        } 
       });