Packery - Hinzufügen von Element durch jquery klicken

Question

Ich beabsichtige, eine Reihe von Textfeldern zu erstellen, die neu angeordnet werden können. Der Benutzer soll Textfelder erstellen und diese dann mit Text füllen können. Während er sie neu anordnet, wird der Text automatisch im Textfeld aktualisiert. I Packery Bibliothek

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

Allerdings verwende, kann ich nicht Boxen nach Belieben fügen Sie den Knopf mit

Answer 1

Sie sollten grid Klasse verwenden statt:

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

Statt:

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

Dann sollten Sie die p zerstören und reinit Nach dem Hinzufügen eines neuen Grid-Items.

HINWEIS:input Tag ist ein sel-schließenden Tag soll es so sein sollte:

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

Hoffnung, das hilft.

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

Es sieht aus wie Sie ein Element mit der Klasse grid haben, aber in Ihrem JS , Sie greifen ein Element mit ID von grid.

Für die fix, Ihre JS ändern, um die id zu greifen die von erregenden class:

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