Packery - 通过 jquery 单击添加元素
Packery - Adding element by jquery click
我打算创建一组可以重新排列的文本框。允许用户创建文本框,然后用文本填充它们。
当他不断重新排列它们时,文本区域中的文本会自动更新。
我正在使用 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>
但是我无法使用按钮随意添加框
看起来你有一个 class grid
的元素,但在你的 JS 中,你正在抓取一个 id of [=11] 的元素=].
为了修复,将您的 JS 从抓取 id
更改为抓取 class
:
$("#add_item").click(function(){
$(".grid").append("<input type='text' class='grid-item' />");
});
您应该使用 class 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>
我打算创建一组可以重新排列的文本框。允许用户创建文本框,然后用文本填充它们。 当他不断重新排列它们时,文本区域中的文本会自动更新。 我正在使用 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>
但是我无法使用按钮随意添加框
看起来你有一个 class grid
的元素,但在你的 JS 中,你正在抓取一个 id of [=11] 的元素=].
为了修复,将您的 JS 从抓取 id
更改为抓取 class
:
$("#add_item").click(function(){
$(".grid").append("<input type='text' class='grid-item' />");
});
您应该使用 class 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>