每当我从#selAttr拖动物品时,我右边会出现一些空间,我无法找出原因?但是当我拖动形式#unSelAttr时,一切都很好。我使用jQuery UI进行排序。
#selAttr {
text-align: left;
height: 200px;
border: 1px solid #eee;
width: 180px;
min-width: 180px;
min-height: 20px;
list-style-type: none;
padding: 0px;
margin-left: 20px;
overflow: auto ;
overflow-x: hidden;
}
#unSelAttr {
text-align: left;
height: 200px;
border: 1px solid #eee;
width: 180px;
min-width: 180px;
min-height: 20px;
list-style-type: none;
padding: 0px;
margin-left: 20px;
overflow: auto ;
overflow-x: hidden;
}
#keysModal {
margin: 0px;
padding: 0px;
color: black;
width: 500px;
min-width: 500px;
margin-left: 5px;
}
.modal-dialog {
top: 100px;
left: 10px;
float: left;
width: 430px;
min-width: 430px;
margin: 0px;
padding: 0px;
margin-left: 5px;
}
<div id="keysModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 id="myModalLabel" class="modal-title" >List of Keys</h4>
</div>
<form id="keysForm" action="javascript:void(0)">
<table>
<tr>
<td>
<ul id="selAttr" class="connectedSortable">
</ul>
</td>
<td>
<ul id="unSelAttr" class="connectedSortable">
</ul>
</td>
</tr>
</table>
<hr/>
<button id="doneBtn" type="button" class="btn btn-success" data-dismiss="modal">Done</button>
</form>
</div>
</div>
</div>
在JS中我有:
$( "#selAttr, #unSelAttr" ).sortable({
connectWith: ".connectedSortable",
update: function(event, ui) {
getActiveKeys();
getNonActiveKeys();
updateNonActiveKeys();
}
}).disableSelection();
答案 0 :(得分:0)
没关系,我解决了。我会发布答案以防其他人遇到同样的问题。我所要做的只是增加到:
width: 185px
在#selAttr。