jQuery Draggable - 独自のスクロールコンテナ以外のスクロールコンテナ

Question

したがって、順序付けられていない別のドロップ可能リストにドラッグするドラッグ可能なリストがあります。ドラッグ可能なアイテムをクローンして「ボディ」に追加すると、そのアイテムをコンテナからドラッグして他のリストのドロップ可能な要素にドロップできますが、ドロップ可能な順序なしリストを自動的にスクロールしません。クローンして他の順序付けされていないリストに追加すると、ドロップ可能リストが自動的にスクロールされますが、ドロップ可能リスト上にホバーするまでドラッグしても要素は表示されません。誰もがこの問題の回避策またはより良いアプローチを知っていますか？ここでは、コードと

フィドル：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 }); 
        } 
       });