jQueryのSortable項目をリストの下の空白にドロップする方法を教えてください。

Question

私はjQuery Sortableを使用しており、2リスト形式の動作を改善したいと考えています。

まず、「ソース」リストと「ターゲット」リストの高さが常に一致し、最大高さが450pxになるようにします。私はこれを単純なように感じるときにこれを理解しようと多くの時間を無駄にしてきました。

編集：これは世話をし、フィドルで更新されました！

第2に、リストの下の空白スペースにアイテムをドロップし、そのアイテムをリストに挿入させたいと考えています。現在、リストの1つにいくつかのオプションしかない場合、ドロップ動作をトリガーするのが難しいため、ユーザーは混乱します。

編集：在庫jQuery UIの機能を利用するために使用していたサードパーティのソート可能なプラグインを削除することでこれを修正しました。それは素晴らしいビジュアル機能をいくつか失いますが、それは私が何をしているかに沿ってもっと機能します。私はこれを反映するために私のフィドルを更新しました。

ここはHTMLですが、フィドルが役立ちます。

<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> 

ここはフィドルです。私はどんな助けもありがとう！

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

Answer 1

このCSSはそれを行う必要があります。

@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); 
    } 
}