javascript - Packery - 通过 jquery 单击添加元素

Question

我打算创建一组可以重新排列的文本框。允许用户创建文本框，然后用文本填充它们。当他不断重新排列它们时，文本区域中的文本会自动更新。我正在使用 Packery 库

// 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 标签是一个自闭标签，所以它应该是:

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