如何允许将 jQuery 可排序项目放入列表下方的空白区域？

Question

我正在使用 jQuery Sortable，并希望改进双列表表单的行为。

首先，我希望“源”和“目标”列表始终具有匹配的高度，最大高度为 450 像素。我浪费了很多时间试图弄清楚它什么时候应该很简单。

编辑：这是在小提琴中处理和更新的！

其次，我希望能够将项目放在列表下方的空白处，并将项目插入到列表中。目前，如果其中一个列表只有几个选项，我的用户会感到困惑，因为很难触发丢弃行为。

编辑：我通过摆脱我使用的第三方可排序插件来解决这个问题，以支持库存的 jQuery UI 功能。它失去了几个漂亮的视觉特征，但它更符合我的追求。我更新了我的小提琴以反映这一点。

这里是 HTML，虽然 fiddle 更有帮助。

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