Javascript 如何保存排序顺序?
我使用Packy和Draggably创建了五个网格。我可以使用Draggably对它们进行排序。在我进行排序后,我需要保存排序后的网格。在这里,当我在dev中检查时,网格没有移动,只是位置没有完全改变网格 因为我已经通过了ID,但是没有用。由于上面提到的问题 有没有办法保存排序顺序?我不想使用Javascript 如何保存排序顺序?,javascript,jquery,sorting,draggable,packery,Javascript,Jquery,Sorting,Draggable,Packery,我使用Packy和Draggably创建了五个网格。我可以使用Draggably对它们进行排序。在我进行排序后,我需要保存排序后的网格。在这里,当我在dev中检查时,网格没有移动,只是位置没有完全改变网格 因为我已经通过了ID,但是没有用。由于上面提到的问题 有没有办法保存排序顺序?我不想使用localStorage 我的代码如下 HTML <h1>Image sort</h1> <div class="packery"> <div class="i
localStorage
我的代码如下
HTML
<h1>Image sort</h1>
<div class="packery">
<div class="item w2 h2 i1" tabindex="0">A</div>
<div class="item w2 h2 i2" tabindex="1">B</div>
<div class="item w2 h2 i3" tabindex="2">C</div>
<div class="item w2 h2 i4" tabindex="3">D</div>
<div class="item w2 h2 i5" tabindex="4">E</div>
</div>
CSS
// http://packery.metafizzy.co/packery.pkgd.js and
// http://draggabilly.desandro.com/draggabilly.pkgd.js added as external resource
// ----- text helper ----- //
$(function() {
var $container = $('.packery').packery({
columnWidth: 100,
rowHeight: 180,
// disable initial layout
isInitLayout: false
});
var pckry = $container.data('packery');
// ----- packery setup ----- //
// trigger initial layout
$container.packery();
var itemElems = $container.packery('getItemElements');
// for each item element
$( itemElems ).each( function( i, itemElem ) {
// make element draggable with Draggabilly
var draggie = new Draggabilly( itemElem );
// bind Draggabilly events to Packery
$container.packery( 'bindDraggabillyEvents', draggie );
});
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body { font-family: sans-serif; }
.packery {
background: #FDD;
background: hsla(45, 100%, 40%, 0.2);
max-width: 460px;
}
/* clearfix */
.packery:after {
content: ' ';
display: block;
clear: both;
}
.item {
width: 240px;
height: 140px;
float: left;
background: #C09;
border: 4px solid #333;
border-color: hsla(0, 0%, 0%, 0.3);
font-size: 20px;
color: white;
padding: 10px;
}
.item:hover {
border-color: white;
cursor: move;
}
.item.w2 { width: 400px; }
.item.h2 { height: 140px; }
.item.w2.i1 { background: #ffff00; }
.item.w2.i2 { background: #ff6633; }
.item.w2.i3 { background: #00c6d7; }
.item.w2.i4 { background: #990099; }
.item.w2.i5 { background: #EEEEEE; }
.item.is-dragging,
.item.is-positioning-post-drag {
border-color: white;
background: #09F;
z-index: 2;
}
发现这似乎与您的示例非常相似
Packery.prototype.sortItems = function( keys, getSortKey ) {
// copy items
//var _items = this.items.slice(0);
var itemsBySortKey = {};
var key, item;
for ( var i=0, len = this.items.length; i < len; i++ ) {
item = this.items[i];
key = getSortKey( item );
itemsBySortKey[ key ] = item;
}
i=0;
len = keys.length;
var sortedItems = [];
for ( ; i < len; i++ ) {
key = keys[i];
item = itemsBySortKey[ key ];
this.items[i] = item;
}
};
var storedSortOrder = localStorage.getItem('sortOrder')
if ( storedSortOrder ) {
storedSortOrder = JSON.parse( storedSortOrder );
pckry.sortItems( storedSortOrder, function( item ) {
return item.element.getAttribute('tabindex');
});
}
packer.prototype.sortItems=函数(键,getSortKey){
//复制项目
//var _items=this.items.slice(0);
var itemsBySortKey={};
var键,项;
对于(变量i=0,len=this.items.length;i
好吧“保存”可能意味着两件事
- 如问题中所述,暂时保存值,如
/localStorage
。问题是,它将解决您在客户端保存订单的问题,即使用户刷新页面并返回,他/她也可以检查这些值并相应地重新排序。缺点是,如果用户删除他/她的缓存和历史记录,当他/她重新访问页面时,数据可能不在那里Cookies
- 另一种方法是使用传统方法,即使用Ajax调用并将数据发送到后端脚本(PHP或Nodejs),该脚本将把值保存到DB。这样,如果存在某种登录系统,您只需将值发布到数据库并以这种方式继续
$order = $_REQUEST['order'];
echo $order;
// Do something here that will store the values to the database
对于NodeJ,您可以执行类似的操作:
希望它有帮助…这可能不是一个完整的答案,但可能会有帮助,您可以从中创建一个函数
var saved_order = {};
Object.keys(object_to_sort)
.sort()
.forEach(function(key, i) {
console.log('new order: ' + key, ':', object_to_sort[key]);
saved_order[key] = object_to_sort[key];
});
您可以在客户端(例如使用localStorage)或服务器端保存排序顺序。请注意,新的HTML(根据新的排序顺序)必须在服务器端或客户端生成(通过动态创建HTML),Pacery将以正确的排序顺序返回元素列表。因此,sortedOrder数组的索引顺序正确。到底出了什么问题?我想按用户的选择保存顺序。因此,您想在拖动事件之前保存网格的上一个顺序??一旦用户进行排序。我需要保存的最新顺序。例如:如果它有顺序A、B、C、D、E,那么他将更改为B、C、D、E,答:我需要保存最新的订单。事实上,我用它提取了我的问题。但这是用本地存储整理出来的。我不需要。你说你想保存它,但你实际上想做什么?我将更改网格的位置。我需要保存该订单。我链接的代码笔将订单保存到本地存储。如果您尝试更改顺序,然后刷新页面,您将看到保存到localStorage的顺序已加载。那么您想要什么?你想用饼干吗?将其发布到服务器?你需要更具体一些。
var saved_order = {};
Object.keys(object_to_sort)
.sort()
.forEach(function(key, i) {
console.log('new order: ' + key, ':', object_to_sort[key]);
saved_order[key] = object_to_sort[key];
});