Restricting movements by axis in packery module

Question

This the javascript code in my fiddle 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);

Right now, the boxes can be moved left, right and bottom. How do I restrict the movement to the bottom?

In https://draggabilly.desandro.com/, the axis can be specified. However, I am confused as to where do I put this option in my code which uses the packery library.

Answer 1

Try this:

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

For restricting Packary plugin to the X axis you can use the horizontal: true option.

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

Check out fiddle: http://jsfiddle.net/f17sa6rm/ (Remember to set height on cotaining grid element)