jQueryUI可排序项目在拖动时位置不正确
jQueryUI Sortable Item Incorrect Position While Dragging
我有一个jQueryUI可排序列表,其中包含三个bootstrap
面板,面板1和2以正确的初始位置开始拖动,但每当您尝试拖动面板3时,它都会从光标偏移到面板1下实时演示
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
$('#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
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;
。
不幸的是,这对引导程序中的列布局造成了严重破坏,因为列的填充现在被添加到百分比宽度上,所以我们的3列最终宽度超过100%。对于我的代码,我实际上不需要在列之间进行任何填充,所以我只在列上设置一个负边距来抵消额外的宽度。
有关框大小CSS属性的详细信息:https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
现场演示
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
$('#sortable').sortable({
tolerance: 'pointer',
handle: '.panel-heading',
start: function (e, ui) {
ui.placeholder.height(ui.item.children().height());
}
});
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
}
相关文章:
- DIV并排,位置不正确
- 将CSS应用于在JavaScript中创建的表-表的位置不正确
- 谷歌地图标记IE中的位置不正确,在chrome上工作正常
- 按钮在 Chrome 中的位置不正确
- 动画过程中位置不正确
- 从 SVG 加载的结构 JS 形状的位置不正确
- 使用 jQuery 滑块缩放图像的位置不正确
- 为什么这些列表项的位置不正确
- Phonegap:在目录中导航,索引位置不正确
- Jquery日期选择器图标位置不正确
- 使用jQuery Mobile构建的iOS应用程序的页脚位置不正确
- 使用VS Code、TypeScript和Node.js的断点位置不正确
- 道场堆叠条形/柱形图表标签位置不正确
- 打印时绝对定位元素的位置不正确
- Html5画布绘制位置不正确
- 刷新页面后图像位置不正确
- 和中逗号的位置不正确
- 气球在地图上的位置不正确
- ng重复会导致锚点位置不正确
- jQueryUI可排序项目在拖动时位置不正确