PACKERY-添加元素，通过jQuery单击

Question

我打算创建一组可以重新排列的文本框。允许用户创建文本框，然后用文本填充它们。随着他继续重新排列，文本会在文本方面自动更新。我正在使用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>

但是，我无法使用按钮

Answer 1

您应该使用类grid：

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

而不是：

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

然后，您应该在添加新的网格项目后销毁和重新定位包装。

注意： input标签是一个sel-closing标签，因此应该是：

<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

看起来您有一个带有grid类的元素，但是在JS中，您正在抓住grid的 id 的元素。

有关修复程序，将JS从抓取id更改为抓取class：

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