Wie kann ich zulassen, dass jQuery Sortable-Elemente in den leeren Bereich unterhalb einer Liste eingefügt werden?

Question

Ich verwende jQuery Sortable und möchte das Verhalten eines Formulars mit zwei Listen verbessern.

Zuerst möchte ich die "Quelle" und "Ziel" -Listen immer übereinstimmende Höhen haben, mit einer maximalen Höhe von 450px. Ich habe viel Zeit verschwendet, um das herauszufinden, wenn es sich so anfühlt, als wäre es einfach.

EDIT: Dies ist gepflegt und aktualisiert in der Geige!

Zweitens möchte ich in der Lage sein, Elemente in den leeren Bereich unter der Liste fallen lassen und die Elemente in die Liste eingefügt werden. Derzeit sind meine Benutzer verwirrt, wenn eine der Listen nur ein paar Optionen enthält, da es schwierig ist, das Drop-Verhalten auszulösen.

BEARBEITEN: Ich reparierte dieses, indem ich das sortierbare plugin der dritten Partei beseitigte, das ich zugunsten der laufenden jQuery UI Funktionalität verwendete. Es verliert ein paar schöne visuelle Eigenschaften, aber es funktioniert mehr im Einklang mit dem, was ich möchte. Ich habe meine Geige aktualisiert, um das zu reflektieren.

Hier ist der HTML, obwohl die Geige ist hilfreicher.

<form id="favoritesForm" action="#" method="post"> 
    <div class="modal-body"> 
    <p>Drag and drop to save as favorites.</p> 
    <div class="container-fluid row row-centered"> 
     <div class="col-centered col-md-6"> 
     <h4>All</h4> 
     <ul id="actionsListModal" class="source connected modal-list-height NoHighlight"> 
      <li draggable="true">Option 1</li> 
      <li draggable="true">Option 2</li> 
      <li draggable="true">Option 3</li> 
      <li draggable="true">Option 4</li> 
      <li draggable="true">Option 5</li> 
      <li draggable="true">Option 6</li> 
      <li draggable="true">Option 7</li> 
      <li draggable="true">Option 8</li> 
      <li draggable="true">Option 9</li> 
      <li draggable="true">Option 10</li> 
      <li draggable="true">Option 11</li> 
      <li draggable="true">Option 12</li> 
      <li draggable="true">Option 13</li> 
      <li draggable="true">Option 14</li> 
     </ul> 
     </div> 
     <div class="col-centered col-md-6"> 
     <h4 style="display:inline-flex">Favorites</h4> 
     <input type="button" id="RemoveAllFavorites" style="float:right;margin-right:25px" value="Remove All"> 
     <ul id="favoritesListModal" class="target connected modal-list-height NoHighlight"> 
      <li draggable="true">Option A</li> 
      <li draggable="true">Option B</li> 
     </ul> 
     </div> 
    </div> 
    <br> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" data-dismiss="modal"><span>Close</span></button> 
    <button type="button" style="margin:0 16px"><span>Discard Unsaved Changes</span></button> 
    <input type="button" id="save-favorites" value="Save Changes"> 
    </div> 
</form> 

Und hier ist die Geige. Ich würde mich über jede Hilfe freuen!

https://jsfiddle.net/n6u9bmvq/6/

Answer 1

Diese CSS sollte es tun:

@media (min-width: 992px) { 
    #favoritesForm .container-fluid { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: flex; 
    } 
    #favoritesForm .col-md-6 { 
    min-height: 100%; 
    } 
    #favoritesListModal,#actionsListModal { 
    min-height: -webkit-calc(100% - 50px); 
    min-height: -moz-calc(100% - 50px); 
    min-height: calc(100% - 50px); 
    } 
}