<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
<body>
  <div class="wrap">
    <header>ヘッダー</header>
    <main>
      <ul class="sortable clearfix">
        <li class="ui-state-default red">項目 1</li>
        <li class="ui-state-default red">項目 2</li>
        <li class="ui-state-default red">項目 3</li>
        <li class="ui-state-default red">項目 4</li>
        <li class="ui-state-default red">項目 5</li>
        <li class="ui-state-default red">項目 6</li>
        <li class="ui-state-default red">項目 7</li>
        <li class="ui-state-default red">項目 8</li>
        <li class="ui-state-default red">項目 9</li>
      </ul>
    </main>
  </div>
  <footer>
    <button class="back-pack">バックパック</button>
    <div>
      <ul class="sortable clearfix">
        <li class="ui-state-default">項目 1</li>
        <li class="ui-state-default">項目 2</li>
        <li class="ui-state-default">項目 3</li>
        <li class="ui-state-default">項目 4</li>
        <li class="ui-state-default">項目 5</li>
        <li class="ui-state-default">項目 6</li>
        <li class="ui-state-default">項目 7</li>
        <li class="ui-state-default">項目 8</li>
        <li class="ui-state-default">項目 9</li>
      </ul>
    </div>
  </footer>
</body>
body {
  margin: 0;
  padding: 0;
}
.wrap {
  height: calc(100vh - 26px);
  overflow-y: scroll;
  transition: .5s ease-in;
}
body.bp-open .wrap {
  height: calc(100vh - 100px - 26px);
}
header {
  background-color: red;
}
footer {
  background-color: green;
  height: 26px;
  transition: .5s ease-in;
}
body.bp-open footer {
  height: calc(100px + 26px);
}
body.bp-open footer div {
  height: 100px;
  overflow-y: scroll;
}
footer .back-pack {
  width: 100%;
}
footer div {
  overflow: hidden;
  height: 0;
  transition: .5s ease-in;
}

.sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

main .sortable {
  background-color: yellow;
  width: 300px;
  min-height: 50px;
}

footer .sortable {
  min-height: 100px;
}

.sortable li {
  margin: 1px;
  padding: 10px 0px 0px 0px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  cursor: move;
  width: 90px;
  height: 30px;
  float: left;
  border: solid 2px skyblue;
}

.sortable li.red {
  border-color: red;
}

.clearfix:after {
  display: block;
  content: "";
  clear: both;
}
$(function() {
  $( '.sortable' ).sortable({ connectWith: '.sortable' });

  $('.back-pack').on('click', function () {
    $('body').toggleClass('bp-open');
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.