javascript - 可排序的div在泳道中被压低

我有一个带有可排序泳道的板，其中包含多个div项目（以水平看板为例）。当我抓住一个要移动的项目时，尽管泳道中的所有项目都被向下推。我一直在为此努力，所以我希望你们能帮助我。

这是指向我的JSFiddle的链接

   $(function() {
      $(".swim-lane-wrapper")
        .sortable({
        axis: "Y",
        handle: ".category-box",
        connectWith: ".swim-lane-wrapper",
      })
        .disableSelection();
    });

    $(function() {
      $(".sortable")
        .sortable({
        connectWith: ".sortable",
      })
        .disableSelection();
    });

   .swim-lane {
      display: inline-block;
      white-space: nowrap;
      float: left;
      width: 90%;
      height: 100px;
      border: 1px solid red;
    }

    .category-box {
      display: inline-block;
      white-space: nowrap;
      float: left;
      background-color: #FFF3CC;
      border: #DFBC6A 1px solid;
      width: 75px;
      height: 50px;
      margin: 5px;
      padding: 10px;
      font-size: 12px;
      white-space: normal;
      text-align: center;
      box-shadow: 2px 2px 2px #999;
      cursor: move;
    }

    .item-box {
      display: inline-block;
      background-color: #edf3ff;
      border: #6d71db 1px solid;
      width: 75px;
      height: 50px;
      margin: 5px;
      padding: 10px;
      font-size: 12px;
      white-space: normal;
      text-align: center;
      box-shadow: 2px 2px 2px #999;
      cursor: move;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylsheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">


    <div class="swim-lane-wrapper">

      <!-- Row One -->
      <div class="swim-lane">
        <div class="category-box">"Category 1"</div>
        <div class="sortable">
          <div class="item-box">"Wrap this long string of text please!"</div>
          <div class="item-box">"Wrap this long string of text please!"</div>
          <div class="item-box">"Wrap this long string of text please!"</div>
        </div>
      </div>

      <!-- Row Two -->
      <div class="swim-lane">
        <div class="category-box">"Category 2"</div>
        <div class="sortable">
          <div class="item-box">"Wrap this long string of text please!"</div>
          <div class="item-box">"Wrap this long string of text please!"</div>
          <div class="item-box">"Wrap this long string of text please!"</div>
        </div>
      </div>

    </div>

最佳答案

将vertical-align: top;添加到.item-box

$(function() {
      $(".swim-lane-wrapper")
        .sortable({
        axis: "Y",
        handle: ".category-box",
        connectWith: ".swim-lane-wrapper",
      })
        .disableSelection();
    });

    $(function() {
      $(".sortable")
        .sortable({
        connectWith: ".sortable",
      })
        .disableSelection();
    });

.swim-lane {
      display: inline-block;
      white-space: nowrap;
      float: left;
      width: 90%;
      height: 100px;
      border: 1px solid red;
    }

    .category-box {
      display: inline-block;
      white-space: nowrap;
      float: left;
      background-color: #FFF3CC;
      border: #DFBC6A 1px solid;
      width: 75px;
      height: 50px;
      margin: 5px;
      padding: 10px;
      font-size: 12px;
      white-space: normal;
      text-align: center;
      box-shadow: 2px 2px 2px #999;
      cursor: move;
    }

    .item-box {
      display: inline-block;
      vertical-align: top;
      background-color: #edf3ff;
      border: #6d71db 1px solid;
      width: 75px;
      height: 50px;
      margin: 5px;
      padding: 10px;
      font-size: 12px;
      white-space: normal;
      text-align: center;
      box-shadow: 2px 2px 2px #999;
      cursor: move;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylsheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">


    <div class="swim-lane-wrapper">

      <!-- Row One -->
      <div class="swim-lane">
        <div class="category-box">"Category 1"</div>
        <div class="sortable">
          <div class="item-box">"Wrap this long string of text please!"</div>
          <div class="item-box">"Wrap this long string of text please!"</div>
          <div class="item-box">"Wrap this long string of text please!"</div>
        </div>
      </div>

      <!-- Row Two -->
      <div class="swim-lane">
        <div class="category-box">"Category 2"</div>
        <div class="sortable">
          <div class="item-box">"Wrap this long string of text please!"</div>
          <div class="item-box">"Wrap this long string of text please!"</div>
          <div class="item-box">"Wrap this long string of text please!"</div>
        </div>
      </div>

    </div>