twitter-bootstrap 拖动时jQueryUI可排序项目位置不正确
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23107327/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQueryUI Sortable Item Incorrect Position While Dragging
提问by Kyle Needham
I have a jQueryUI sortable list which contains three bootstrappanels, panels 1 and 2 start dragging with the correct initial positions, however whenever you try to drag panel 3 it drops under panel 1 offset from the cursor. Live demo
我有一个 jQueryUI 可排序列表，其中包含三个bootstrap面板，面板 1 和面板 2 以正确的初始位置开始拖动，但是每当您尝试拖动面板 3 时，它就会落在从光标偏移的面板 1 下方。现场演示
HTML
HTML
<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>
JavaScript
JavaScript
$('#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());
}
});
CSS
CSS
ul {
width: 650px;
list-style: none;
padding: 0;
margin: 0;
}
.panel-al-placeholder {
margin-bottom: 18px;
border:2px solid #f8e287;
background:#fef9e7
}
回答by jodeci
I had a similar problem, setting the helper to clone mode worked for me:
我遇到了类似的问题，将助手设置为克隆模式对我有用：
$('#sortable').sortable({
helper: 'clone'
});
回答by lakerz
I had the same problem. I've found in the past that the CSS stylebox-sizing: border-box;that bootstrap sets globaly can cause issues with some javascript libraries, and it turned out to be the issue in this case as far as I can tell. I've come up with a quick fix that sets the box-sizing back to the CSS2 default box-sizing: content-box;for the columns.
我有同样的问题。我过去发现box-sizing: border-box;bootstrap 全局设置的 CSS 样式可能会导致某些 javascript 库出现问题，据我所知，在这种情况下，这就是问题所在。我想出了一个快速修复方法，将框的大小设置回 CSS2box-sizing: content-box;列的默认值。
Unfortunately this plays havoc with the column layout in bootstrap because the padding of the columns is now added onto the percentage width, so our 3 columns end up being wider than 100%. For my code, I didn't actually need any padding between my columns so I just set a negative margin on my columns to offset the extra width.
不幸的是，这对引导程序中的列布局造成了严重破坏，因为列的填充现在添加到百分比宽度上，因此我们的 3 列最终比 100% 宽。对于我的代码，我实际上不需要在我的列之间进行任何填充，所以我只是在我的列上设置了一个负边距来抵消额外的宽度。
For more information about the box-sizing CSS property: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
有关 box-sizing CSS 属性的更多信息：https: //developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
HTML
HTML
<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>
Javascript
Javascript
$('#sortable').sortable({
tolerance: 'pointer',
handle: '.panel-heading',
start: function (e, ui) {
ui.placeholder.height(ui.item.children().height());
}
});
CSS
CSS
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
}
