javascript - 在 packery 模块中按轴限制运动

Question

这是我 fiddle 中的 javascript 代码 http://jsfiddle.net/eadaradhiraj/v5d1qt7q/3/

// 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 库的代码中将此选项放在哪里感到困惑。

Answer 1

试试这个:

var draggie = new Draggabilly(gridItem, {
  axis:'x'
});

要将 Packary 插件限制在 X 轴上，您可以使用 horizo​​ntal: true 选项。

var grid = $('.grid').packery({
  itemSelector: '.grid-item',
  columnWidth: 100,
  horizontal: true
});

查看 fiddle :http://jsfiddle.net/f17sa6rm/(记得在包含的网格元素上设置高度)