CODEWITHSUNDEEP
htmlcssjquery-uijquery-ui-sortable
Kaleb Anderson
Kaleb Anderson

Reputation: 188

How can I allow jQuery Sortable items to be dropped into the blank space below a list?

I am using jQuery Sortable and would like to improve the behavior of a two-list form.

First, I want the "source" and "target" lists to always have matching heights, with a maximum height of 450px. I have wasted a lot of time trying to figure this out when it feels like it should be simple.

EDIT: This is taken care of and updated in the fiddle!

Second, I want to be able to drop items in the blank space under the list and have the items be inserted into the list. Currently, my users get confused if one of the lists has only a couple of options, as it is difficult to trigger the drop behavior.

EDIT: I fixed this by getting rid of the third party Sortable plugin I was using in favor of the stock jQuery UI functionality. It loses a couple of nice visual features, but it works more in line with what I'm after. I updated my fiddle to reflect this.

Here's the HTML, though the fiddle is more helpful.

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

And here's the fiddle. I would appreciate any help!

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

Upvotes: 1

Views: 444

Answers (1)

tao
tao

Reputation: 90312

This CSS should do it:

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

Upvotes: 1

Related Questions