我在 BS 中创建了一个仪表板网格，并希望能够使用 Sortable 拖动图块 - 这本身工作正常，但行为确实不可预测。
我有一个 6 x 4 网格，例如，如果我将一个项目从第 2 行移动到第 1 行，那么该项目会正确移动到位，但它要替换的项目会向下跳到第 2 行，而其他所有内容都会向下移动一行所以我现在最终得到 6 x 5 网格。
此外，在大多数情况下，我实际上无法将项目直接移动到第 2 行，因此我需要开始移动每个周围的所有其他图块，每个图块也有与上面类似的问题，使其再次变得更糟。
我用于排序的代码是：
$(function() {
$(".sortable-heading").sortable({
connectWith: '.heading-sortable',
items: '.panel',
helper: 'original',
cursor: 'move',
handle: '.panel-title, [data-action=move]',
revert: 100,
grid: [ 10, 10 ],
delay: 150,
containment: '#home-dash',
forceHelperSize: true,
opacity: 0.7,
placeholder: 'sortable-placeholder',
forcePlaceholderSize: true,
tolerance: 'pointer',
start: function(e, ui){
ui.placeholder.height(ui.item.outerHeight());
}
});
});
我没有发布所有 HTML 代码，而是创建了一个小提琴来显示此操作。
如果将红色面板移到顶行，您将看到添加附加行的行为，如果您尝试将蓝色面板拖到现在的第二行，则无法轻松完成。
我认为 html 结构太复杂，无法与您当前的代码一起使用。当您移动某个项目时，它会被附加/添加到应与之交换的项目的父级
div您需要做的是将要排序的项目的父项
div.appenddiv这是更新后的代码（我在代码中添加了注释来解释我所做的事情）：
$(function() {
var startParent;
$(".sortable-heading").sortable({
connectWith: '.heading-sortable',
items: '.panel',
helper: 'original',
cursor: 'move',
handle: '.panel-title, [data-action=move]',
revert: 100,
grid: [10, 10],
delay: 150,
containment: '#home-dash',
forceHelperSize: true,
opacity: 0.7,
placeholder: 'sortable-placeholder',
forcePlaceholderSize: true,
tolerance: 'pointer',
start: function(e, ui) {
ui.placeholder.height(ui.item.outerHeight());
//Store the parent in a variable as we will be appending the target item to this in the "update" event.
startParent = $(ui.item).closest('.col-xs-2');
},
update: function(e, ui) {
//When an item is swapped, it may have been added before the existing item or after it.
//Check if the contents of the "next" item is not undefined. If it is undefined, it means
//the item was inserted before the existing item.
if ($(ui.item).next()[0] !== undefined) {
//next() is the existing item.
startParent.append($(ui.item).next());
} else {
startParent.append($(ui.item).prev());
}
}
});
});
bhttoan，
这是预期的行为。当您再添加一个 col-xs-2 时。因此，最后一项将被推到下一行。为了解决这个问题，你需要有一个 div 与类行 为所有（4x6 = 24 项）。然后你的结构就会被保留。
你可以这样使用它
<!doctype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Display as grid</title>
<link
rel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/base/jquery-
ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width:
450px; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left;
width: 100px; height: 90px; font-size: 4em; text-align: center; }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>
</body>
</html>