我在BS中创建了一个 Jmeter 板网格,并希望能够使用Sortable拖动瓷砖-这本身工作正常,但行为确实不可预测。
我有一个6 x 4的网格,例如,如果我将一个项目从第2行移动到第1行,那么该项目将正确地移动到位,但它正在替换的项目将跳到第2行,其他所有内容都将向下移动一行,因此我现在最终得到6 x 5的网格。
此外,在大多数情况下,我实际上不能直接将项目移动到第2行,所以我需要开始移动所有其他瓷砖,其中每个瓷砖也有类似的问题,使情况变得更糟。
我使用的sortable代码是:
$(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代码,而是创建了一个小提琴来展示这一点。
如果您将红色面板移动到第一行,您将看到添加额外行的行为,如果您尝试将蓝色面板拖到现在的第二行,则无法轻松完成。
https://jsfiddle.net/mk3whz43/2/
3条答案
按热度按时间mpgws1up1#
我认为html的结构太复杂了,不能和你现在的代码一起工作,当你移动一个项目的时候,它被附加/前置到它应该交换的项目的父
div
上,这样就破坏了内容的结构。你需要做的是将你想要排序的项目的父
div
存储在一个变量中,在更新时,.append
将目标项目存储到这个div
中。当你开始排序时,你仍然会看到“跳跃”,但是项目的实际排序将工作。下面是更新后的代码(我在代码中添加了注解来解释我所做的事情):
字符串
Updated Fiddle
hgncfbus2#
bhttoan,
这是预期的行为。当你再添加一个col-xs-2.所以,最后一个项目将被推到下一行。为了解决这个问题,你需要有一个单一的div与类行为所有(4x 6 =24项)。然后你的结构被保留。
uyhoqukh3#
你可以这样使用它
字符串