포장재 - 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를 파괴하고 다시 시작해야합니다. 새로운 그리드 아이템을 추가 한 후 ackery. 이 도움이

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

희망 :

참고 : 그것이 있어야하므로input 태그는 SEL-닫는 태그입니다.

// 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' />"); 
});