Gridstack.js: Cannot move widget horizontally (Allow horizontal swapping without creating new rows)

[amrbahaa]

for example : i have a grid with fixed 4 columns and four rows When i was trying to move the widget Horizontally and no place for the other widgets to slide up or down , the end result is you will not be able to move that widget unless there is enough space for other widgets to slide up/down.

is there any way to make the other widgets to slide left/right? so i can move any widget when i have a fixed width and height grid with full capacity widgets.

[abologna-r7]

:+1:
I think the reordering/collision strategy should be change (or have multiple strategies) to work as a swap rather than a push.

[jffaust]

:+1:
I have a grid with fixed width and height and when the grid is full, I can't move widgets horizontally. It is possible though to move them vertically. I would like a solution as well.

[ceuk]

:+1:

It's a bit unintuitive as well that when there are two widgets in a row you can't drop one in between them without them both moving down

[ghost]

:+1:
I have done a little research and gridster appears to have a working solution for this.
https://github.com/ducksboard/gridster.js/issues/54. Not sure if it works or not.
Still need a solution for gridstack!

[ghost]

In https://github.com/dustmoo/gridster.js the horizontal swap works with identical sized items. It's a little difficult to swap horizontally when the items are different sized, that way the grid must expand(because one item might be too big for the swappers spot) but cannot because it is at a fixed number of rows.

[asonarya]

:+1: Has anyone found a solution to this?

[joelcuevas]

+1. It's too hard to simply move to the right a widget without messing up everything else... I have found that the current behavior is counter intuitive for the most of my users.

If somebody --with more understanding of the gridstack internal code than me-- is willing to propose a solution, I'll be more than happy to help to develop it. :)

[h-nazzal]

it's already in the works ... i am currently refactoring the old collision detection code.
i have some pretty good results handling ~ 300 widgets with no lag or stutter what so ever.
i will implement this feature also. i know that exact code that is responsible for the behavior and it's just a simple fix.

[ghost]

@h-nazzal Thank you! I look forward to it.

[yedidmh]

Cool!

On Wed, Aug 5, 2015 at 9:23 PM, alan12111 [email protected] wrote:

@h-nazzal https://github.com/h-nazzal Thank you! I look forward to it.

—
Reply to this email directly or view it on GitHub
https://github.com/troolee/gridstack.js/issues/149#issuecomment-128200468
.

[asonarya]

Nice!! Just curious when do you plan to merge it? @h-nazzal

[h-nazzal]

soon enough maybe today or tomorrow! :)

[asonarya]

Wonderful!

[ghost]

I am excited :+1:

[asonarya]

Hi @h-nazzal have you been able to merge it yet? just wondering

[h-nazzal]

sorry you guys .. i just had a problem with certain widget sizes not being moved correctly i have to fix that before i post the changes ..

[ghost]

@h-nazzal Would it work if they were all the same size?

[h-nazzal]

yes it would ..
for example if you have a raw of 1 unit widgets (making a total of 12 widgets) and you moved widget # 5 to widget # 6 position then widget # 6 will move to widget # 5 position and doesnt go into a new raw.

but the current problem is that with different sizes you have to predict the width and the distance that each widget has to move (which is sort of solved by moving the widgets one block at a time)
im working on making the current implementation feel as natural as possible, but i cant provide a solution with bugs (if you know what i mean :p )!

[asonarya]

@h-nazzal could you please show what you have for the same size widgets? I would like to help. Thanks

[h-nazzal]

the code below is proven to be non-working. so with that in mind here it is.
it is only safe if you have equal size widgets which i dont think is the case for every one using this plugin.

for now i will not work with this code any more .. im going to go for a full rewrite of the collision detection mechanism as working with it is seriously hard.

    GridStackEngine.prototype._fix_collisions = function(node) {
        var self = this ,
        block_dir = {left : false , right:false} ,
        x;

        this._sort_nodes(-1);
        var nn = node, has_locked = Boolean(_.find(this.nodes, function(n) { return n.locked }));
        if (!this.float && !has_locked) {
            nn = {x: node.x, y: node.y, width: node.width, height: node.height};
        }

        var collision_nodes = _.filter(this.nodes, function(n) {
            return n != node && Utils.is_intercepted(n, nn);
        }, this);

        if (_.isEmpty(collision_nodes) ) {
            return;
        }else{
            _.each(collision_nodes,function(collision_node){
                //detect horizontal collision if there are any collisions found
                _.each(self.nodes, function(n) {
                    if(n.y === collision_node.y){
                        var collision_X = collision_node.x-1 < 0 ? 0 : collision_node.x - 1 ;
                        if(n.x === collision_X ){
                            block_dir.left = true;
                            return true;
                        }else if(n.x === collision_node.x + 1){
                            block_dir.right = true;
                            return true;
                        }                            
                    }

                }, this);

                if(!block_dir.left){
                    x = collision_node.x - 1 < 0 ? 0 : collision_node.x-1 ;
                }else if(!block_dir.right){
                    x = collision_node.x+1;
                }else{
                    x = collision_node.x;
                }

                self.move_node(collision_node, x , node.y + node.height,
                collision_node.width, collision_node.height, true);  
            });
        }
    };

DO NOT USE IN PRODUCTION , USE IT AT YOUR OWN RISK :)

[steezeburger]

I guess this is still in the works? Setting height: 1 does not allow me to swap or move items.

[radiolips]

That's correct. I believe it will be readied for v1.0.0. It may be in 0.3.0, but is very unlikely to make it into the current dev build. As you can see, the issue remains open and will stay open until it's been resolved.

[steezeburger]

Awesome, I'll play around with the patch above as it fits my use case and then wait for an official fix later on. Thanks for the quick reply.

[tchyong]

May i know when v1.0 will be release for this enhancement feature?

[mandys]

@h-nazzal with what version does your code work ? I know it doesn't work with the latest one but I tried with v0.23 which was released last year and even with that it's not working. I am trying with equal size widgets. Any help would be appreciated.

[nikunjit101]

@h-nazzal May i know when will be release for horizontal swapping?

[h-nazzal]

sorry guys ... but that wont be happening. i have hit a huge wall trying to make the plugin make the desired effect.

[puresick]

If you want to use the snippet above watch out for the function naming. I got it working in v0.2.6 after replacing the above snippet with the code in gridstack and adjusting the function name from GridStackEngine.prototype._fix_collisions to GridStackEngine.prototype._fixCollisions (like the default function is called in gridstack).

[eagoo]

Widget swapping – A much-requested feature, we’re working on a way to make widgets swap places so that widgets may still be moveable even in a full grid.

will this devloped in next version?

[Shiva4393]

@eagoo @h-nazzal @radiolips
Just a small remainder... When this feature is available?

[sailajachellu]

I am having the same issue. Can anyone let me know whether this is resolved. if yes, please let me know the version to take.

[h-nazzal]

@Shiva4393 @sailajachellu im not working on this anymore.
as i have said before i moved to my own custom solution.

[jamdav16]

Keen to see this feature too if someone else can develop a solution.

[Shiva4393]

@h-nazzal Can you please share your custom solution with an example which fixes this issue?

[Altraya]

+1 Do you have any news for this issue ?

[viennaotf]

I too would like an update on this please

[adumesny]

@h-nazzal

i know that exact code that is responsible for the behavior and it's just a simple fix.
.... the code below is proven to be non-working....I'm going to go for a full rewrite of the collision detection mechanism as working with it is seriously hard.

aaah... aaah :)
guessing we never had a working (non trivial same size) working version ?
I might take a look at the current heuristic as it doesn't appear to move objects when past half point (like #1094), and could check for swap if size happen to be the same. No promise

[kevinlandsberg]

Hi guys, is it still work in progress? Would be nice to have this maybe as a gridstackoption...
Having only 3 items in a 1 row and 3 column width, all items same width and height, want to have the possibility to move item 1 to position of item 3 and have them just swap positions, possible?

[adumesny]

I started looking at it last weekend and may have to re-write entire collision heuristics at some point... $$ donation would certainly help as this is a BIG task.

Update: I should have some time during the holidays to look at this now that 3.x Html5 is out and solid.

[adumesny]

Update: I spent the weekend on this and have swapping on same sized items working in a private branch, which is now the default for top gravity float: false rather than push down (feels more natural IMO), and also used on floating grids if the grid is full and cannot create new rows (maxRow set). Also fixes going down and not swapping right away until you are past the same sized object, and bunch of other oddities and Inefficiencies...

Still need to prevent larger items from swapping unless they are 50% covered, doing collide on the most covered item (not first one) and lot more testing... Hopefully this 5y old most wanted feature will make it now...

Horizontal swapping of different sized objects will need to wait for gravity: left feature (#754) which is a totally different ball game.