我在使用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。
答案 0 :(得分：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;
}
我希望我帮助过。