Question

我在使用Jquery Sortables，Bootstrap时遇到了一些问题，以及它如何处理增长列表中的一些div。我的小提琴在这里jsfiddle。

<section class="container">

<div>

  <table class="dataview table table-bordered table-striped table-condensed">
    <tr class="row">
      <td>
        <label class="col-md-12" style="display: block;">03/12/2018</label>
        <div class="col-md-1 sortable">
          <label>Mobile Employee 1</label>
          <ul id="sortable1" class="connectedSortable">
            <li><span>Item1</span></li>
            <li><span>Item2</span></li>
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>Mobile Employee 2</label>
          <ul id="sortable2" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>Mobile Employee 3</label>
          <ul id="sortable3" class="connectedSortable">
            <li><span>Item3</span></li>
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>Mobile Employee 4</label>
          <ul id="sortable4" class="connectedSortable">
            <li><span>Item4</span></li>
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c1</label>
          <ul id="sortable5" class="connectedSortable">
            <li><span>Item5</span></li>
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c2</label>
          <ul id="sortable6" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c3</label>
          <ul id="sortable7" class="connectedSortable">
          </ul>
        </div>

        <div class="col-md-1 sortable">
          <label>c4</label>
          <ul id="sortable8" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c5</label>
          <ul id="sortable9" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c6</label>
          <ul id="sortable10" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c7</label>
          <ul id="sortable11" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c8</label>
          <ul id="sortable12" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c9</label>
          <ul id="sortable13" class="connectedSortable">
          </ul>
        </div>
      </td>
    </tr>
  </table>
</div>

$("#sortable1, #sortable2, #sortable3, #sortable4, #sortable5, #sortable6, #sortable7, #sortable8, #sortable9, #sortable10, #sortable11, #sortable12, #sortable13").sortable({connectWith: ".connectedSortable"}).disableSelection();

当你看到小提琴时，你会看到移动员工1的Div由于多个列表项而在扩展。当我希望c2保持在移动员工1以下时，这推动了c2 Div。想法？

编辑：不幸的是我错过了一个很大的细节，因为我试图在我不得不离开之前发布这个细节。单元格数（Mobile Employee1,2,3，c2-9）可以有所不同。它可以是0-n，所以这就是为什么我不把它们分成他们自己的div。

Answer 1

Html代码

<div>

  <table class="dataview table table-bordered table-striped table-condensed">
    <tr class="row">
      <td>
        <label class="col-md-12" style="display: block;">03/12/2018</label>

      <div id="wrap">

      <div class="col-md-1 sortable">
          <label>Mobile Employee 1</label>
          <ul id="sortable1" class="connectedSortable">
            <li><span>Item1</span></li>
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>Mobile Employee 2</label>
          <ul id="sortable2" class="connectedSortable">
            <li><span>Item2</span></li>
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>Mobile Employee 3</label>
          <ul id="sortable3" class="connectedSortable">
            <li><span>Item3</span></li>
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>Mobile Employee 4</label>
          <ul id="sortable4" class="connectedSortable">
            <li><span>Item4</span></li>
          </ul>
          </div>
          </div>
        <div id="wrap"> <div class="col-md-1 sortable">



          <label>c1</label>
          <ul id="sortable5" class="connectedSortable">
            <li><span>Item5</span></li>
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c2</label>
          <ul id="sortable6" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c3</label>
          <ul id="sortable7" class="connectedSortable">
          </ul>
        </div>

        <div class="col-md-1 sortable">
          <label>c4</label>
          <ul id="sortable8" class="connectedSortable">
          </ul>
          </div>]</div>
        <div id='wrap'> <div class="col-md-1 sortable">



          <label>c5</label>
          <ul id="sortable9" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c6</label>
          <ul id="sortable10" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c7</label>
          <ul id="sortable11" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c8</label>
          <ul id="sortable12" class="connectedSortable">
          </ul>
        </div>
        <div class="col-md-1 sortable">
          <label>c9</label>
          <ul id="sortable13" class="connectedSortable">
          </ul>
        </div>
        </div>
      </td>
    </tr>
  </table>
</div>

Css代码：

div{
  overflow: auto;

  }

  #wrap {
    width:100%;
  padding: 10px;

  }


span {

  margin: 0px 5px 5px;
  border: 1px solid rgb(0, 0, 0);
  border-image: none;
  width: 120px;
  font-size: 1.2em;
}

ul {
  padding: 5px 0px 0px;
  border: 1px solid rgb(238, 238, 238);
  border-image: none;
  width: 120px;
  margin-right: 10px;
  list-style-type: none;
}

.sortable {
  border: 1px solid rgb(0, 0, 0);
  border-image: none;
  min-height: 70px;
  float: left;
}

我希望我帮助过。

Jquery Sortable和Bootstrap包装导致布局问题

1 个答案: