我正在使用Bootstrap v4中的Flexbox构建一个包含两个全高列的web应用程序。这两列都包含一个连接的可排序列表,可以使用jQuery UI Sortable对该列表进行排序。
HTML:
<div class="container-fluid h-100 d-flex flex-column p-0">
<div class="row flex-grow-1 p-3">
<div class="row flex-grow-1 p-3">
<div class="col-4 mh-100 full-height-col">
<ul class="list-group sortable-container sortable-connect">
<li class="list-group-item">Item 1</li>
</ul>
</div>
<div class="col-8 mh-100 full-height-col">
<div class="row">
<div class="col-4 mb-3">
<ul class="list-group sortable-container sortable-connect">
<li class="list-group-item">Item A</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
body, html {
height: 100%;
}
.sortable-container {
min-height: 2rem;
}
.full-height-col {
overflow-y: scroll;
overflow-x: hidden;
}
JS
$(function() {
$(".sortable-connect").sortable({
connectWith: ".sortable-connect"
}).disableSelection();
});
每当我将一个项目从左边的列表移动到右边的列表时,div会水平滚动,所有剩余的项目都会移出窗口。
这是JSFiddle。
有没有关于如何防止左侧列表水平滚动的想法?
发布于 2019-06-10 22:59:16
您需要将可排序的"scroll“设置为false。
这将防止容器在拖动可排序元素时滚动。
接下来,您将希望使用helper: 'clone'
和appendTo: 'body'
将可排序元素放在最前面;当可排序div有滚动时,可排序元素将浮动在其他所有元素后面,使用帮助器将把它放在前面。
$(function() {
$(".sortable-connect").sortable({
connectWith: ".sortable-connect",
scroll: false,
helper: 'clone',
appendTo: 'body',
start: function(event,ui) {
ui.helper.addClass('ui-helper');
}
}).disableSelection();
});
https://stackoverflow.com/questions/55691251
复制相似问题