パッカー - jqueryで要素を追加するをクリックします

Question

私は並べ替えることができる一連のテキストボックスを作成しようとしています。ユーザーは、テキストボックスを作成し、テキストボックスで入力することができます。 テキストを整理し続けると、テキストはテキストエリアで自動的に更新されます。私は

// 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>

しかしpackeryライブラリを使用しています は、私はあなたがクラスgridを持つ要素を持っているように見えボタン

Answer 1

あなたが代わりにクラスgrid使用する必要があります。

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

の代わりに：

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

を

次に、あなたはpを破壊し、新しいグリッドアイテムを追加したあとのアテナリー。

注：それがあるべきようinputタグは、SEL-終了タグである：

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

は、この情報がお役に立てば幸いです。

// 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

を使用して意のままにボックスを追加しますが、あなたのJSですることはできませんidがgridの要素を取得しています。

修正については、グラブにidをつかんでから、あなたのJSを変更class：

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