jQuery UI - Ziehbare Artikel im Überlauf-y: scroll Behälter

Question

ich eine Webseite, wo ich Elemente auf der rechten Seite haben, die auf der linken Seite in Spalten ziehbar sind. Funktioniert gut, außer ich möchte eine feste Höhe oder maximale Höhe auf dem Artikel-Container auf der rechten Seite, mit Überlauf-y: Rolle angewendet. Wenn ich dies versuche, ziehen die Elemente unter der Zielspalte, anstatt wie oben. Wenn ich die Überlaufeigenschaft aus dem Elementcontainer div nehme, funktioniert es korrekt.

Kann jemand zeigen, wo ich falsch gehe? Wie kann ich eine scrollbare ziehbare Liste erhalten?

JS Fiddle hier zu zeigen, was ich meine ... https://jsfiddle.net/bvxxetot/

Hier wird der JavaScript-Code ist Ich verwende die ziehbar/abwerfbaren Bereiche init

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> 

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!'); 
} 

danke!

Answer 1

Sie können diese Funktionalität erhalten die helper: 'clone' verwenden, jedoch müssen Sie einige Code hinzufügen, ein paar Dinge zu beheben.

Im ziehbar Konstruktor:

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

Im CSS:

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

Hier eine Arbeits jsfiddle, basiert auf dem Code:
https://jsfiddle.net/ahx7urbk/