Question

この私のバイオリン内の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ライブラリを使用する私のコードにどこにこのオプションを置くのか混乱しています。真のオプション：あなたは、水平を使用することができます軸XにPackaryプラグインを制限するための

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

：

Answer 1

はこれを試してみてください。

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

フィドルをチェックアウト：http://jsfiddle.net/f17sa6rm/ （cotainingグリッド要素の上に高さを設定することを忘れないでください）