jQuery UI - オーバーフローyのドラッグ可能な項目：スクロールコンテナ

Question

私は左側の列にドラッグ可能なアイテムがあるウェブページを持っています。オーバーフロー-y：スクロールを適用して、アイテムコンテナの右側に固定高さまたは最大高さを設定したい場合を除き、うまくいきます。私がこれをやろうとすると、項目は上にではなく目標の列の下にドラッグされます。アイテムコンテナdivからオーバーフロープロパティを取得すると、正しく動作します。

誰かが間違っていると指摘できますか？スクロール可能なドラッグ可能なリストを取得するにはどうしたらいいですか？ HERE

JSフィドルはここhttps://jsfiddle.net/bvxxetot/

は、私はドラッグ/ドロップ可能エリア

HTML

<div id="tmpl-view-builder-container"> 

    <div id="tmpl-view-preview-container"> 
    <div class="droppable"> 


    </div> 

    </div> 

    <div id="tmpl-view-legend-container"> 
    <h3>Available Fields</h3> 
    <div id="tmpl-view-legend-item-container">  
     <ul> 
      <li>Field 1</li> 
      <li>Field 2</li> 
      <li>Field 3</li> 
      <li>Field 4</li> 
      <li>Field 5</li> 
      <li>Field 6</li> 
      <li>Field 7</li> 
      <li>Field 8</li> 
      <li>Field 9</li> 
      <li>Field 10</li> 
     </ul> 
    </div>  
    </div> 

</div> 

を初期化するために使用しているJavaScriptコードである...私が何を意味するか表示します

CSS

.droppable { border:1px dashed #000000; width:75%; float:left; height:400px;} 

#tmpl-view-legend-container { 
    position:absolute; 
    right:20px; 
    top:0px; 
    height:400px; 
    overflow-y:scroll; 
} 

#tmpl-view-legend-container ul { list-style-type:none; padding:0; } 
#tmpl-view-legend-container ul li { background:#CCCCCC; margin-bottom:10px; padding:7px 10px; cursor:pointer; } 

JS

$(function() { 
    $('.droppable').droppable({ 
      accept:'#tmpl-view-legend-item-container li', 
     hoverClass: 'hovered', 
     drop: testDropFunction 
    }); 

    $('#tmpl-view-legend-item-container li').draggable({ 
      stack: '#tmpl-view-legend-items li', 
     cursor: 'move', 
     revert: true, 
     appendTo: 'body' 
    }); 
}); 


function testDropFunction(event, ui) { 
    alert('Testing!'); 
} 

はあなたに感謝します！

Answer 1

helper: 'clone'を使用してこの機能を利用できますが、いくつかのコードを修正する必要があります。 CSSで

helper: 'clone', 
    start: function(e, ui) { 
     ui.helper.width($(this).width()); 
     $(this).css('visibility', 'hidden'); 
    }, 
    stop: function(e, ui) { 
     $(this).css('visibility', ''); 
    } 

：ドラッグ可能なコンストラクタで

ここ

li.ui-draggable.ui-draggable-handle.ui-draggable-dragging { list-style-type:none; background:#CCCCCC; margin-bottom:10px; padding:7px 10px; cursor:pointer; } 

はあなたのコードに基づいて作業jsfiddle、次のとおりです。
https://jsfiddle.net/ahx7urbk/