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 notifications@github.com 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 ?

[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.

[kevinlandsberg]

Behaviour like this is expected:

http://sortablejs.github.io/Sortable/#grid

[adumesny]

@kevinlandsberg if you drag 1 over 9 in ^^ it reflows the list, which may or may not be what you want. I have it swap 1 <-> 9 instantly (in my swapping branch). Or course the example they give is VERY simple (all same size and full flowing grid). Gridstack can handle any size combination and empty space with items floating, which is a much harder problem...

Anyway with my swapping code it behaves much better IMO, but the edge cases are hard to fix. I need to find time to finish it up.

And donation are welcomed as always since I'm not getting any help on these...

[kevinlandsberg]

I will Donate some Money if this Feature Works...😂

[adumesny]

yeah right... I already spent >20 hours on this and while I have it mostly working, there is still a lot of testing to make sure I didn't break something else. Already got burned fixing 3 issues for someone else and not getting even a thank you after 3 weeks. I've only gotten 1 donation for #1094 which is related and yet multiple people say they would donate...

guess what ? it take a LOT of work to create this lib and I spent countless weekends and holidays on this. Because of that I'm actually thinking of turning my work into a licensed version. then people will actually have to pay to use it.

[dahacouk]

@adumesny would you consider setting this up on https://opencollective.com ? It's much more transparent, and it would also get you exposure. I need to ask my team if they think your project works for us. And if the answer to both those questions is yes then I will definitely donate to the project. Cheers!

[adumesny]

@dahacouk would have to read more, but I'm not trying to open a charity per say... thanks.

[adumesny]

and donations are pouring in!!!! (I wish) 5.5y years in the making, in the next release v3.4 or v4.0

default float:false (top gravity)

https://user-images.githubusercontent.com/3496166/107982087-4340a200-6f78-11eb-8b39-5a9b448a610d.mp4

float:true case

https://user-images.githubusercontent.com/3496166/107982494-045f1c00-6f79-11eb-9d84-14876431287a.mp4

maxRow:3 for full grid, even if float=true

https://user-images.githubusercontent.com/3496166/107982687-5c961e00-6f79-11eb-98fd-a114196b3381.mp4

[dahacouk]

@dahacouk would have to read more, but I'm not trying to open a charity per say... thanks.

I hear you. You don't have to set up a charity, by the way. In the main, it's about being transparent and open. It's working very well for a lot of open source projects (big and small).

Great demos by the way.

[kevinlandsberg]

Woooooow thank you! Release it and i will donate! Cheers!!!

[adumesny]

@dahacouk I take it your team isn't using it then... v4 has been released. not sure why I need to be transparent about the peanut support I've been getting so far...

[adumesny]

@dahacouk and others, I've added github sponsor so you can see donations and hopefully make it easier to do...