Comments (5)
Fixed this with a helper method that sorts the returned array based on row / col
from gridster.js.
Is there a way I can get the Element Id with serialize?
from gridster.js.
nvm,
function testing(){
var pos = 1;
var ids = $("#dash li")
.map(function () {
return this.id;
}).get();
$.each(
ids,
function(){
//alert(this);
var col = $("#"+this).attr("data-col");
var row = $("#"+this).attr("data-row");
var y = $("#"+this).attr("data-sizey");
var x = $("#"+this).attr("data-sizex");
var id = this.replace("id_","");
alert(id+"="+col+"="+row+"="+y+"="+x+"="+pos);
pos++;
}
);
}
from gridster.js.
Try this to get serialize data for id, row & column for the current order:
var gridster = $(".gridster ul").gridster({
widget_margins: [10, 10],
widget_base_dimensions: [140, 140],
serialize_params: function($w, wgd) {
return {
id: wgd.el[0].id,
col: wgd.col,
row: wgd.row
};
}
}).data('gridster');
$('#check').bind('click',function() {
console.log(gridster.serialize());
return false;
})
from gridster.js.
Thanks to @kayrules I wrote a serialize method that also calculates the order:
var contentGrid = $(".gridster ul").gridster({
widget_margins: [5, 5],
widget_base_dimensions: [178, 143],
min_cols: 3, max_cols: 3,
// custom serialization method that also returns the order index
serialize_params: function($w, wgd) {
return {
id: $w.data('id'),
row: wgd.row,
col: wgd.col,
order: (wgd.row - 1) * contentGrid.cols + (wgd.col - 1),
element: $w
};
},
draggable: {
stop: function() {
updateContentOrder(contentGrid.serialize());
}
}
}).data('gridster');
from gridster.js.
Related Issues (20)
- Using Gridster with React HOT 2
- gridstack Uncaught TypeError: Cannot set property '_id' of undefined HOT 1
- Commercial support for Gridster HOT 1
- package.json dependency HOT 1
- Resize doesn't worked HOT 2
- Resize of dc charts when i resize the gridster div
- WARNING : Link to gridster.net redirects to malicious pages ! HOT 2
- serialize_params Returns Odd Info
- resize option not work HOT 5
- Save after drag and drop changes
- Change widget base size and calculate new sizex and sizey
- handle_class: resize does not work if multiple classes are added
- Gridster.js add_widget hangs at page load
- widget is overlapped when moving another widgets
- JQUERY Gridster Widgets Overlap Issue
- If you are looking for a responsive gridster, you can try this
- 拖拽模块到屏幕右侧消失
- if you are looking for a maintained grid lib - check gridstack.js instead !
- Prevent moving one or more another elements
- How to do horizontal direction (right to left) movement when removing widgets in GidsterJS, as of now GridsterJS supports vertical direction only.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gridster.js.