在 packery 模块中按轴限制运动
Restricting movements by axis in packery module
这是我 fiddle http://jsfiddle.net/eadaradhiraj/v5d1qt7q/3/
中的 javascript 代码
// external js: packery.pkgd.js, draggabilly.pkgd.js
$("#add_item").click(function() {
$(".grid").append("<input type='text' class='grid-item'/>");
$grid.packery('destroy');
initParckery();
});
$grid = initParckery();
function initParckery() {
var grid = $('.grid').packery({
itemSelector: '.grid-item',
columnWidth: 100
});
// make all grid-items draggable
grid.find('.grid-item').each(function(i, gridItem) {
var draggie = new Draggabilly(gridItem);
// bind drag events to Packery
grid.packery('bindDraggabillyEvents', draggie);
});
return grid;
}
// show item order after layout
function orderItems() {
var itemElems = $grid.packery('getItemElements');
var res_text = '';
$(itemElems).each(function(i, itemElem) {
res_text = ' ' + $(itemElem).text();
});
$('#result_text').text(res_text);
}
$grid.on('layoutComplete', orderItems);
$grid.on('dragItemPositioned', orderItems);
现在,框可以向左、向右和底部移动。如何限制移动到底部?
在https://draggabilly.desandro.com/中可以指定轴。但是,我对在使用 Packery 库的代码中将此选项放在哪里感到困惑。
试试这个:
var draggie = new Draggabilly(gridItem, {
axis:'x'
});
要将 Packary 插件限制在 X 轴上,您可以使用 horizontal: true 选项。
var grid = $('.grid').packery({
itemSelector: '.grid-item',
columnWidth: 100,
horizontal: true
});
查看 fiddle:http://jsfiddle.net/f17sa6rm/
(记得在包含的网格元素上设置高度)
这是我 fiddle http://jsfiddle.net/eadaradhiraj/v5d1qt7q/3/
中的 javascript 代码// external js: packery.pkgd.js, draggabilly.pkgd.js
$("#add_item").click(function() {
$(".grid").append("<input type='text' class='grid-item'/>");
$grid.packery('destroy');
initParckery();
});
$grid = initParckery();
function initParckery() {
var grid = $('.grid').packery({
itemSelector: '.grid-item',
columnWidth: 100
});
// make all grid-items draggable
grid.find('.grid-item').each(function(i, gridItem) {
var draggie = new Draggabilly(gridItem);
// bind drag events to Packery
grid.packery('bindDraggabillyEvents', draggie);
});
return grid;
}
// show item order after layout
function orderItems() {
var itemElems = $grid.packery('getItemElements');
var res_text = '';
$(itemElems).each(function(i, itemElem) {
res_text = ' ' + $(itemElem).text();
});
$('#result_text').text(res_text);
}
$grid.on('layoutComplete', orderItems);
$grid.on('dragItemPositioned', orderItems);
现在,框可以向左、向右和底部移动。如何限制移动到底部?
在https://draggabilly.desandro.com/中可以指定轴。但是,我对在使用 Packery 库的代码中将此选项放在哪里感到困惑。
试试这个:
var draggie = new Draggabilly(gridItem, {
axis:'x'
});
要将 Packary 插件限制在 X 轴上,您可以使用 horizontal: true 选项。
var grid = $('.grid').packery({
itemSelector: '.grid-item',
columnWidth: 100,
horizontal: true
});
查看 fiddle:http://jsfiddle.net/f17sa6rm/ (记得在包含的网格元素上设置高度)