Beschränken Bewegungen von Achsen in Packery Modul

Question

Dies ist der Javascript-Code in meiner Geige 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); 

Im Moment können die Boxen verschoben werden links, rechts und unten. Wie beschränke ich die Bewegung nach unten?

In https://draggabilly.desandro.com/ kann die Achse angegeben werden. Allerdings bin ich verwirrt, wo ich diese Option in meinen Code, der die Packery-Bibliothek verwendet, einfügen.

Answer 1

Versuchen Sie folgendes:

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

Für Packary Plugin zur X-Achse zu beschränken Sie die horizontale verwenden können: true Option.

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

Check out Geige: http://jsfiddle.net/f17sa6rm/ (Denken Sie daran, Höhe einstellen auf cotaining Gitterelement)