我有一个 jQueryUI 可排序列表,其中包含三个
bootstrap
面板,面板 1 和 2 开始以正确的初始位置拖动,但是每当您尝试拖动面板 3 时,它都会落在距光标偏移的面板 1 下方。 现场演示
<ul id="sortable">
<li class="col-xs-4">
<div class="panel panel-default">
<div class="panel-heading ui-sortable-handle">1</div>
<div class="panel-body"></div>
</div>
</li>
<li class="col-xs-4">
<div class="panel panel-default">
<div class="panel-heading ui-sortable-handle">2</div>
<div class="panel-body"></div>
</div>
</li>
<li class="col-xs-4">
<div class="panel panel-default">
<div class="panel-heading ui-sortable-handle">3</div>
<div class="panel-body"></div>
</div>
</li>
</ul>
$('#sortable').sortable({
tolerance: 'pointer',
handle: '.panel-heading',
placeholder: 'col-xs-4 panel-al-placeholder',
start: function (e, ui) {
ui.placeholder.height(ui.item.children().height());
}
});
ul {
width: 650px;
list-style: none;
padding: 0;
margin: 0;
}
.panel-al-placeholder {
margin-bottom: 18px;
border:2px solid #f8e287;
background:#fef9e7
}
我遇到了类似的问题,将助手设置为克隆模式对我有用:
$('#sortable').sortable({
helper: 'clone'
});
我也有同样的问题。我过去发现引导程序全局设置的 CSS 样式
box-sizing: border-box;
可能会导致某些 javascript 库出现问题,据我所知,这就是本例中的问题。我想出了一个快速修复方法,将列的框大小设置回 CSS2 默认值 box-sizing: content-box;
。
不幸的是,这对 bootstrap 中的列布局造成了严重破坏,因为列的填充现在添加到百分比宽度上,因此我们的 3 列最终比 100% 宽。对于我的代码,我实际上不需要列之间有任何填充,因此我只需在列上设置负边距以抵消额外的宽度。
有关 box-sizing CSS 属性的更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
<ul id="sortable">
<li class="col-xs-4">
<div class="panel panel-default">
<div class="panel-heading ui-sortable-handle">1</div>
<div class="panel-body"></div>
</div>
</li>
<li class="col-xs-4">
<div class="panel panel-default">
<div class="panel-heading ui-sortable-handle">2</div>
<div class="panel-body"></div>
</div>
</li>
<li class="col-xs-4">
<div class="panel panel-default">
<div class="panel-heading ui-sortable-handle">3</div>
<div class="panel-body"></div>
</div>
</li>
</ul>
$('#sortable').sortable({
tolerance: 'pointer',
handle: '.panel-heading',
start: function (e, ui) {
ui.placeholder.height(ui.item.children().height());
}
});
ul {
width: 650px;
list-style: none;
padding: 0;
margin: 0;
}
.col-xs-4 {
box-sizing: content-box;
margin: 10px -16px;
}
.panel-al-placeholder {
margin-bottom: 18px;
background:#fef9e7
}
在使用 bootstrap 3 处理旧页面时,如果发现页面滚动时顶部位置发生变化。
花了一些时间才发现我可以只添加“appendTo”主体,然后问题就解决了。
$("#sortable").sortable({
appendTo: document.body,
update: function(event, ui) {
//some function();
}
});
希望其他人可以通过此信息节省时间。