以编程方式重新排序或移动 Draggable + Packery (Masonry) 中的元素
Programmatically reorder or move elements in Draggable + Packery (Masonry)
这里有一个 fiddle:http://jsfiddle.net/bortao/00uvL60c/1/
当我按下 "move left" / "move right" 时,我想发送区块 left/right。我通过使用 el.insertBefore(el.prev())
/ el.insertAfter(el.next())
将它重新插入到 dom 结构上来做到这一点,但这不起作用,因为它保持 left
/ top
坐标,并且也不要触摸包装内部结构,如果有的话。
如果我拖动方块,它就会起作用。在右下角,我显示了 packery('getItemElements')
的结果,但这是只读的。
有办法吗?
我工作过,但使用的是同位素(类似的东西)。
现在直接回答http://jsfiddle.net/yry6kknh/:
$(".item .left").on("click", function() {
var el = $(this).closest(".item");
if (el.prev()) {
el.insertBefore(el.prev());
$("#cont").packery('reloadItems');
$("#cont").packery();
}
});
$(".item .right").on("click", function() {
var el = $(this).closest(".item");
if (el.next()) {
el.insertAfter(el.next());
$("#cont").packery('reloadItems');
$("#cont").packery();
}
});
第一个修复:使用 $("#cont") 而不是范围变量 $container,以始终拥有最后的 DOM 个元素(延迟加载或其他 DOM 操作)
其次我检查了http://packery.metafizzy.co/js/packery-docs.min.js,发现packery.prototype.reloadItems,当html改变时,Packery需要更新他的项目,$("#cont").packery();强制重新渲染。
这不是最正确的方法,但有效:)
您好,您可以使用这个 https://jsfiddle.net/ibad_gore/00uvL60c/28
我对您的代码所做的更改是:
$(".item .left").on("click", function(event) {
var ch = $(this).closest('.item');
$container.packery( 'fit', ch[0] , 202, ch.offset().top )
});
$(".item .right").on("click", function(event) {
var ch = $(this).closest('.item');
$container.packery( 'fit', ch[0] , 0, ch.offset().top )
});
您可以根据需要管理值0和202。
这里有一个 fiddle:http://jsfiddle.net/bortao/00uvL60c/1/
当我按下 "move left" / "move right" 时,我想发送区块 left/right。我通过使用 el.insertBefore(el.prev())
/ el.insertAfter(el.next())
将它重新插入到 dom 结构上来做到这一点,但这不起作用,因为它保持 left
/ top
坐标,并且也不要触摸包装内部结构,如果有的话。
如果我拖动方块,它就会起作用。在右下角,我显示了 packery('getItemElements')
的结果,但这是只读的。
有办法吗?
我工作过,但使用的是同位素(类似的东西)。
现在直接回答http://jsfiddle.net/yry6kknh/:
$(".item .left").on("click", function() {
var el = $(this).closest(".item");
if (el.prev()) {
el.insertBefore(el.prev());
$("#cont").packery('reloadItems');
$("#cont").packery();
}
});
$(".item .right").on("click", function() {
var el = $(this).closest(".item");
if (el.next()) {
el.insertAfter(el.next());
$("#cont").packery('reloadItems');
$("#cont").packery();
}
});
第一个修复:使用 $("#cont") 而不是范围变量 $container,以始终拥有最后的 DOM 个元素(延迟加载或其他 DOM 操作)
其次我检查了http://packery.metafizzy.co/js/packery-docs.min.js,发现packery.prototype.reloadItems,当html改变时,Packery需要更新他的项目,$("#cont").packery();强制重新渲染。
这不是最正确的方法,但有效:)
您好,您可以使用这个 https://jsfiddle.net/ibad_gore/00uvL60c/28
我对您的代码所做的更改是:
$(".item .left").on("click", function(event) {
var ch = $(this).closest('.item');
$container.packery( 'fit', ch[0] , 202, ch.offset().top )
});
$(".item .right").on("click", function(event) {
var ch = $(this).closest('.item');
$container.packery( 'fit', ch[0] , 0, ch.offset().top )
});
您可以根据需要管理值0和202。