Question

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

首先，我希望“源”和“目标”列表始终具有匹配的高度，最大高度为450px。当我觉得它应该很简单时，我浪费了很多时间试图解决这个问题。

编辑：这是小提琴中的照顾和更新！

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

编辑：我通过摆脱我使用的第三方Sortable插件来支持股票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);
  }
}

如何将jQuery Sortable项目放入列表下方的空白区域？

1 个答案: