Comments (10)
ishields
commented on August 22, 2024
@teq-smu Hmm. I'm able to recreate the grid. I'm essentially iterating over the stored layout (which has x,y,w,h,locked) and setting the data-gd-x, etc attributes. I then call the gridstack constructor and everything works fine. Make sure auto-position is set to false.
from gridstack.js.
troolee
commented on August 22, 2024
Hi,
Yes please provide sample of your code.
from gridstack.js.
teq-smu
commented on August 22, 2024
Thanks for your answers, I tried to force the data-gs-auto-position but it still does not work.
@ishields I basically do the same thing as you describe but without any result; so I provide sample of my code
<div class="grid-stack">
<?php foreach (json_decode(file_get_contents('persist.json')) as $item) : ?>
<div class="grid-stack-item" data-gs-x="<?php echo $item->x; ?>" data-gs-y="<?php echo $item->y; ?>" data-gs-width="<?php echo $item->w; ?>" data-gs-height="<?php echo $item->h; ?>" data-gs-auto-position="false">
<div class="grid-stack-item-content"><?php echo $item->content; ?></div>
</div>
<?php endforeach; ?>
</div>onDomReady
$('.grid-stack').gridstack({
cell_height: 80,
vertical_margin: 10
});JSON file persist.json
[{"x":"0","y":"0","w":"3","h":"3","content":"CONTENT 09"},{"x":"5","y":"0","w":"4","h":"3","content":"CONTENT 08"},{"x":"1","y":"3","w":"3","h":"4","content":"CONTENT 05"},{"x":"4","y":"10","w":"3","h":"4","content":"CONTENT 07"},{"x":"5","y":"7","w":"4","h":"4","content":"CONTENT 06"},{"x":"0","y":"8","w":"3","h":"2","content":"CONTENT 01"},{"x":"2","y":"7","w":"2","h":"1","content":"CONTENT 03"},{"x":"6","y":"14","w":"3","h":"2","content":"CONTENT 04"},{"x":"4","y":"14","w":"2","h":"2","content":"CONTENT 10"},{"x":"3","y":"16","w":"3","h":"4","content":"CONTENT 02"}]from gridstack.js.
troolee
commented on August 22, 2024
@teq-smu I think I've found a problem. Will be fixed soon.
Also, can you provide me an HTML code which is generated by your PHP?
from gridstack.js.
teq-smu
commented on August 22, 2024
Yeah for sure !
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gridstack Sandbox</title>
<link rel="stylesheet" href="/dist/css/styles.min.css">
</head>
<body>
<div class="grid-stack">
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="3" data-gs-auto-position="false">
<div class="grid-stack-item-content">CONTENT 09</div>
</div>
<div class="grid-stack-item" data-gs-x="5" data-gs-y="0" data-gs-width="4" data-gs-height="3" data-gs-auto-position="false">
<div class="grid-stack-item-content">CONTENT 08</div>
</div>
<div class="grid-stack-item" data-gs-x="1" data-gs-y="3" data-gs-width="3" data-gs-height="4" data-gs-auto-position="false">
<div class="grid-stack-item-content">CONTENT 05</div>
</div>
<div class="grid-stack-item" data-gs-x="4" data-gs-y="9" data-gs-width="3" data-gs-height="4" data-gs-auto-position="false">
<div class="grid-stack-item-content">CONTENT 07</div>
</div>
<div class="grid-stack-item" data-gs-x="5" data-gs-y="13" data-gs-width="4" data-gs-height="4" data-gs-auto-position="false">
<div class="grid-stack-item-content">CONTENT 06</div>
</div>
<div class="grid-stack-item" data-gs-x="0" data-gs-y="8" data-gs-width="3" data-gs-height="2" data-gs-auto-position="false">
<div class="grid-stack-item-content">CONTENT 01</div>
</div>
<div class="grid-stack-item" data-gs-x="2" data-gs-y="7" data-gs-width="2" data-gs-height="1" data-gs-auto-position="false">
<div class="grid-stack-item-content">CONTENT 03</div>
</div>
<div class="grid-stack-item" data-gs-x="6" data-gs-y="17" data-gs-width="3" data-gs-height="2" data-gs-auto-position="false">
<div class="grid-stack-item-content">CONTENT 04</div>
</div>
<div class="grid-stack-item" data-gs-x="4" data-gs-y="17" data-gs-width="2" data-gs-height="2" data-gs-auto-position="false">
<div class="grid-stack-item-content">CONTENT 10</div>
</div>
<div class="grid-stack-item" data-gs-x="3" data-gs-y="19" data-gs-width="3" data-gs-height="4" data-gs-auto-position="false">
<div class="grid-stack-item-content">CONTENT 02</div>
</div>
</div>
<script src="/dist/js/script.min.js"></script>
</body>
</html>from gridstack.js.
teq-smu
commented on August 22, 2024
I finally fix my pb !
In fact I was trying to access data-gs-* attribute with the jQuery .data() function. But as described in documentation ; the data stored by this function are cached at some point.
I try to get it via .attr('data-gs-*') and it has worked.
Here is a sample function to get draggable items data
function _getItems() {
var items = [];
$('.grid-stack-item.ui-draggable').each(function () {
var $this = $(this);
items.push({
x: $this.attr('data-gs-x'),
y: $this.attr('data-gs-y'),
w: $this.attr('data-gs-width'),
h: $this.attr('data-gs-height'),
content: $('.grid-stack-item-content', $this).html()
});
});
return items;
}Maybe it can be a nice idea to include a function like that to allow user to get items (widgets) informations.
Thanks for all and continue the nice job
from gridstack.js.
troolee
commented on August 22, 2024
Ok. I fixed it. It should be fine now.
Also, you can get widget node data by:
var node = $(el).data('_gridstack_node');from gridstack.js.
devSam123
commented on August 22, 2024
Hello! In my project we have a functionality to pin a specific grid stack item , pinning means restricting from resizing and dragging and also locking its position, so that no other item can shuffle it while it's being dragged. This has to be done at run time. I have taken reference from https://github.com/tropicalista/angular-gridstack. We have an angular app. Any help would be greatly appreciated.
from gridstack.js.
oshields
commented on August 22, 2024
Did you look at the locked option? Believe that prevents other drags from moving the item around.
Not sure if it also prevents drags and moves on the item but if not there is movable and resizable options as well.
from gridstack.js.
devSam123
commented on August 22, 2024
Thanks for your response! Yes i tried manipulating the 'data-gs-locked' , 'data-gs-no-resize' and 'data-gs-no-move' options run time. By doing so i am able to lock/unlock a specific item.
I faced another issue after that, we have a functionality of adding and removing widgets run time.I tried using - $('.grid-stack').data('gridstack').remove_widget(el,true);, but after doing so other widgets gets misaligned and they don't come back to normal mode again. Kindly help me adding and removing widget run time.
from gridstack.js.
Related Issues (20)
- Demo for lit is not working (https://gridstackjs.com/demo/web-comp.html)
- Responsive grids don't render items with minW correctly on resize HOT 3
- Custom drag element of type button doesn't work HOT 1
- Responsive grid coordinates system is inconsistent HOT 5
- Scale & Different Resolution Question HOT 5
- Unable to set max grid height HOT 2
- How to use Angular library (like PrimeNg) components in gridstack HOT 1
- GridStack's draggable option doesn't behave as expected when using Vue Rendering Grid Item Content HOT 4
- Updating DOM stack elements within the captured change event are not reflected. HOT 5
- The Change event is not always fired when items have changed after dragging HOT 2
- MakeSubGrid example in the documentation does not work HOT 1
- 'R' can rotate fixed sized or width/height items HOT 4
- Can't cancel an external item from being dragged by pressing 'Esc' key HOT 2
- The grid-stack item should expand its height to fit the content HOT 2
- Custom handles with icons cannot be dragged HOT 4
- Scrollbar flickering issue when widget matches window height HOT 2
- Tree shakeable HOT 2
- Cant find dragOut property HOT 1
- Widgets get the wrong width when resized in breakpoint mode HOT 1
- Widget over another widget HOT 5
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 gridstack.js.