html - 如何允许将 jQuery Sortable 元素放入列表下方的空白区域？

Question

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

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

编辑:这是在 fiddle 中处理和更新的!

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

编辑:我通过摆脱我使用的第三方 Sortable 插件来支持 stock jQuery UI 功能来解决这个问题。它失去了一些不错的视觉功能，但它更符合我所追求的。我更新了我的 fiddle 以反射(reflect)这一点。

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

这是 fiddle 。如果有任何帮助，我将不胜感激!

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