Packery-通过jquery单击添加元素

Question

I am intending to create a set of textboxes that can be rearranged. The user is to be allowed to create text boxes and then fill them with text. As he keeps rearranging them the text gets automatically updated in the textarea. I am using packery library

 // external js: packery.pkgd.js, draggabilly.pkgd.js $("#add_item").click(function(){ $("#grid").append("<input type='text' class='grid-item'></input>"); }); 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 ); }); // 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 ); 

 * { box-sizing: border-box; } body { font-family: sans-serif; } /* ---- grid ---- */ .grid { background: #DDD; max-width: 1200px; } /* clear fix */ .grid:after { content: ''; display: block; clear: both; } /* ---- .grid-item ---- */ .grid-item { float: left; width: 100px; height: 100px; background: #C09; border: 2px solid hsla(0, 0%, 0%, 0.5); color: white; font-size: 20px; padding: 10px; } .grid-item--width2 { width: 200px; } .grid-item--height2 { height: 200px; } .grid-item:hover { border-color: hsla(0, 0%, 100%, 0.5); cursor: move; } .grid-item.is-dragging, .grid-item.is-positioning-post-drag { background: #C90; z-index: 2; } .packery-drop-placeholder { outline: 3px dashed hsla(0, 0%, 0%, 0.5); outline-offset: -6px; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://unpkg.com/packery@2.1.1/dist/packery.pkgd.js"></script> <script src="https://unpkg.com/draggabilly@2.1.1/dist/draggabilly.pkgd.js"></script> <h1>Packery - get item elements in order after drag</h1> <button id="add_item" class="ui-button ui-widget ui-corner-all">A button element</button> <div class="grid"> <input type="text" class="grid-item"></input> <input type="text" class="grid-item"></input> <input type="text" class="grid-item"></input> </div> <textarea id="result_text" readonly></textarea> 

However, I can not add boxes at will using the Button

Answer 1

You should use class grid instead :

$(".grid").append("<input type='text' class='grid-item'/>");

Instead of :

$("#grid").append("<input type='text' class='grid-item'></input>");

Then you should destroy and reinit the packery after adding new grid-item.

NOTE : input tag is a sel-closing tag so it should be :

<input type='text' class='grid-item'/>

Hope this helps.

 // external js: packery.pkgd.js, draggabilly.pkgd.js $("#add_item").click(function() { $(".grid").append("<input type='text' class='grid-item'/>"); grid.packery('destroy'); 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() { setTimeout(function() { var res_text = ''; var items = grid.packery('getItemElements'); items.forEach(function(itemElem) { res_text += ' ' + $(itemElem).val(); }); $('#result_text').val(res_text); }, 100) } var grid = initParckery(); grid.on('layoutComplete', orderItems); grid.on('dragItemPositioned', orderItems); 

 * { box-sizing: border-box; } body { font-family: sans-serif; } /* ---- grid ---- */ .grid { background: #DDD; max-width: 1200px; } /* clear fix */ .grid:after { content: ''; display: block; clear: both; } /* ---- .grid-item ---- */ .grid-item { float: left; width: 100px; height: 100px; background: #C09; border: 2px solid hsla(0, 0%, 0%, 0.5); color: white; font-size: 20px; padding: 10px; } .grid-item--width2 { width: 200px; } .grid-item--height2 { height: 200px; } .grid-item:hover { border-color: hsla(0, 0%, 100%, 0.5); cursor: move; } .grid-item.is-dragging, .grid-item.is-positioning-post-drag { background: #C90; z-index: 2; } .packery-drop-placeholder { outline: 3px dashed hsla(0, 0%, 0%, 0.5); outline-offset: -6px; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://unpkg.com/packery@2.1.1/dist/packery.pkgd.js"></script> <script src="https://unpkg.com/draggabilly@2.1.1/dist/draggabilly.pkgd.js"></script> <h1>Packery - get item elements in order after drag</h1> <button id="add_item" class="ui-button ui-widget ui-corner-all">A button element</button> <div class="grid"> <input type="text" class="grid-item a"></input> <input type="text" class="grid-item b"></input> <input type="text" class="grid-item c"></input> </div> <textarea id="result_text" readonly></textarea> 

Answer 2

It looks like you have an element with class grid , but in your JS, you are grabbing an element with id of grid .

For the fix, change your JS from grabbing the id to grabbing the class :

$("#add_item").click(function(){
    $(".grid").append("<input type='text' class='grid-item' />");
});