Question

我有一个带有可排序泳道的电路板，其中包含多个div项目（想想水平看板）。当我抓住一个物品来移动它时，泳道中的所有物品都被压下了。我一直在敲打这个，所以我希望你们能帮助我。

这是指向JSFiddle

的链接

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我同意@manuel的答案，但我找到了解决这个问题背后原因的解决方案。 UI sortable使用临时占位符，类名为library(tidyverse) df <- "ID; attribute1; attribute2; attribute3 1; 2; 3; 4 2; 7; 8; 3 3; 4; 6; 4 4; 2; 3; 4" %>% read_delim("; ", trim_ws = T) lookup <- data.frame( attribute1 = c(2, 4, 7), attr1_text = c("Hello", "Goodbye", "Example") ) left_join(df, lookup, by = "attribute1") #> # A tibble: 4 x 5 #> ID attribute1 attribute2 attribute3 attr1_text #> <int> <dbl> <int> <int> <fct> #> 1 1 2. 3 4 Hello #> 2 2 7. 8 3 Example #> 3 3 4. 6 4 Goodbye #> 4 4 2. 3 4 Hello merge(df, lookup, by = "attribute1", all.x = T) #> attribute1 ID attribute2 attribute3 attr1_text #> 1 2 1 3 4 Hello #> 2 2 4 3 4 Hello #> 3 4 3 6 4 Goodbye #> 4 7 2 8 3 Example，代替挂起的元素。这是一个隐藏元素，主元素的宽度和高度相同。它没有额外的样式，也没有在UI CSS文件中定义。

您可以通过这种hacky样式指定此隐藏元素的高度，并防止相邻元素失去其位置：

.ui-sortable-placeholder

可排序的div在泳道中被推倒

2 个答案: