Allow horizontal swapping without creating new rows

[geekdave]

Dragging a widget downwards results in the widget swapping positions with the one below it.

We would like the option for the same behavior when dragging a widget horizontally. Currently instead of swapping positions with the widget to the right, we see instead that a new row is created and the widgets are shifted downwards, leaving undesired empty positions in the grid.

This is best illustrated with visual examples:

Desired behavior when dragging vertically:

Undesired behavior when dragging horizontally:

[davekiss]

+1. Or, perhaps, an option that disables/strips the empty spaces. If a user is organizing content, the empty space can really trip up what order things are going to appear in.

[lhammond]

+1

[MichaelPaulukonis]

+1

Some mechanism to set max_rows and max_cols would be nice.
That would probably require setting some sort of behavior rules to deal with the pushed-out elements.

[dustmoo]

I am working on this feature for an application I am working on. I will let you know when I get a stable fork.

[davekiss]

Thanks for being awesome and sharing!

[ehowardtillit]

+1 on this one too.

How do you guys cope with this at the moment ?

[kayrules]

+1

[feezy9]

+1

[davekiss]

@ehowardtillit You can use the less pretty jQuery UI http://jqueryui.com/sortable/#display-grid

[andyval]

+1

I would like that if you were to move B to where C is. Then E will move up to where B was and C will move to where E was.

[ehowardtillit]

@davekiss Yeah I know, but gridster abstracts lots of things and fits easier into the project i'm planning.

[dustmoo]

Hi Everyone, I am still working on this. The problem, unfortunately is complicated, because gridster mainly only pays attention to the top left grid location of widgets and then based on the size of the widget, shifts other widgets down or up respectively.

I am having to write a while new manage_movements method that has many more checks in place. It is proving to be a challenging exercise. I hope to have something by the end of next week. I'll let you know.

[ehowardtillit]

@dustmoo Thank you for keeping us posted about this. Don't hesitate if you need some testing being done.

[lhammond]

+1, make that thingie work, homey

we'll test that thingie

On Nov 15, 2012, at 11:22 AM, Enrique Howard-Tillit wrote:

@dustmoo Thank you for keeping us posted about this. Don't hesitate if you need some testing being done.

—
Reply to this email directly or view it on GitHub.

[dustmoo]

Hi Everyone,

I have a version for everyone to test at my fork:

https://github.com/dustmoo/gridster.js

The behavior is as follows:

Widgets of smaller or equal size to the dragged widget (player)
will swap places with the original widget.

This causes tiles to swap left and right as well as up and down.

By default smaller players will shift larger widgets down.

I have added an option to prevent this behavior:

$.gridster({
    shift_larger_widgets_down: false
});

By setting shift_larger_widgets_down to false, smaller widgets will not displace larger ones.

I have only tested this code on a default grid so far. And not attempted to apply other fixes noted in the main branch. I have my own issues board for the fork for issues related to my code.

Let me know how it works for you.

Cheers!

[geekdave]

Just found another plugin which accomplishes this feature in an elegant way. Check out jQuery.Shapeshift.

[davekiss]

@dustmoo tried your fork, and it seems to work pretty well, but i am still experiencing some oddities:

In fig. 1 and 1a, the original code produces the diagrammed behavior flawlessly. However, with your fork, if I try to pull down box B to swap positions with box E, box B actually just pushes box E down into a new row. This seems to be a bit unpredictable; other times, the two boxes switch positions as expected.

[dustmoo]

@davekiss. This is because of the default behavior of gridster. If you set "shift_larger_widgets_down" to false, this fixes this behavior. (though larger widgets will not shift down)

In the code gridster tries to shift the widgets down first. I'll see if I can add some logic that allows large widgets to shift down without causing the behavior you are describing.

[dustmoo]

@davekiss I updated the fork and the shifting should be more predictable, as it doesn't try to shift the widgets down if it they can be swapped.

@geekdave Thanks, that is a nice library, though I need the tiles to swap places rather than do an iphone-like shift.

[dustmoo]

Hi all, I updated my fork to better handle large to small widget swapping. So far I am pretty happy with the functionality.

https://github.com/dustmoo/gridster.js

[geekdave]

Update: One of my coworkers wrote a dashboard widget framework from scratch, which handles this case quite well. If anyone is looking for a good dashboard framework, check it out!

Project page: https://github.com/ModelN/sDashboard
Live demo: http://modeln.github.com/sDashboard/example/ex.html

[FRickReich]

is this modified version still working with the current version, or does it miss some features?

[dustmoo]

Hey @FRickReich, as far as I know, but I haven't gone through and made sure all the patches that apply could be applied to my fork. Many of the patches do not apply because I have heavily modified the code.

If there is a feature missing that you'd like, let me know. I am going to be spending some time over the next few weeks cleaning up the code, squashing bugs and updating documentation.

Thanks.

[FRickReich]

oh i didnt know you "heavily" modified it, i thought you just added a bit here and there i didnt yet look at it in depth, but i thought some of these features seem important. the only thing i was worried about is that one line i added from one of these issues here, i dont even remember what it was but it reintialized the grid after moving so it all keeps itself stable, just wondering if you got it in there or not. (i know, i stated EXTREMLY clear what i mean...haha...god bless late night coding...)

[dustmoo]

Can you reference the issue? I can make sure I add it.

Yeah, the modifications are pretty heavy because of how limited Gridster actually was when I dove into it. Go ahead and play around with it. I can fix anything you might need.

[FRickReich]

great deal, sir! let me change over to your code and ill let you know.

[dustmoo]

Great, I am sure I have more fixes to make, as I applied my code to a specialized application. But since gridster seems abandoned for the moment, I want to get the code up to speed and handle as many of these issues as possible.

Cheers!

[ndung]

@dustmoo,

This is my js:

var gridster;
$(function(){
var log = document.getElementById('log');
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 55],
widget_margins: [5, 5],
max_cols: 3,
max_rows: 3,
draggable: {
start: function(e, ui, $widget) {
log.innerHTML = 'START position: ' + ui.position.top +' '+ ui.position.left + "
"+ log.innerHTML;
},
stop: function(e, ui, $widget) {
log.innerHTML = 'STOP position: ' + ui.position.top +' '+ ui.position.left + "
" + log.innerHTML;
}
}
}).data('gridster');
});

From your fork, I can get the value of stop position, but I can't get the value of start position. Could u help me? Because the current gridster can do this.
Thanks.

[michal-kazmierczak]

Max_rows feature seems still be missing.

[jurbank]

Hey @dustmoo, what's the status on this?

[dustmoo]

The status is that I haven't looked at this for 6 months. ;) I guess it is time too. There are a couple of issues in this thread which are you referring too @jurbank?

[jurbank]

@dustmoo Thanks Dustin! I found what I was looking for.

[webdwarf]

hello,
max_rows feature doesn't work in the last version.
How can I forbid gridster to a add a row

[harshmsp]

Hello @dustmoo , is there max_rows features working or not ? Because when I am use following codes then column works but row portion not works, Means i have set main div width as 300 and grid column width as 70 with 3 column then i am not add 4th column in the row, but when i want to show only 3 box in a column then height not works, and box added in the Infinity level.
min_cols: 3,
max_rows: 3,

Please help me.

[dustmoo]

Hey @harshmsp, honestly I haven’t looked at this library for over a year. From the top of my head, max_rows only works on my branch if you disable shifting larger widgets down.

Much of the problem comes from how the original was coded, which didn’t have any advanced usage like this in mind. Are you using the shift_larger_widgets_down setting?

shift_larger_widgets_down: false;

On Tue, Feb 24, 2015 at 9:25 PM, harshmsp [email protected]
wrote:

Hello @dustmoo , is there max_rows features working or not ? Because when I am use following codes then column works but row portion not works, Means i have set main div width as 300 and grid column width as 70 with 3 column then i am not add 4th column in the row, but when i want to show only 3 box in a column then height not works, and box added in the Infinity level.
min_cols: 3,
max_rows: 3,

Please help me.

Reply to this email directly or view it on GitHub:
#54 (comment)

[harshmsp]

Still I am searching for this solution, I just want to confirm as if I want to set fix Height n Width for main panel and in that I want to use max number of rows with all block resizable and with max_rows only for 4, means user not drag any block to 5th rows so is that possible ?

Width 960 px
Height 800px
max columns = 6
I want to use only max rows : 4 (if user drag any block to 5 level row then it not able to do)

I know this happen through max_rows but there are two gridster.js available where one can works with this but resize not works and another with resize works but max_rows not works. Want to confirm with both work togher, do you have any demo link where your were done both this things.

[g-javi]

👍

[grumbleman]

@dustmoo Thank you very much! This was just what i was looking for!