Drag'n'resize widgets

[Disminder]

Some like that form, where I writing this feature-request now. Just normally resize, but with sticking to the grid. With big grids with small step (100x100 grid, 5px step) it can be useful)

Thanks!

[dovys]

It's pretty easy to adobt jquery resizable with gridster. Done it in one project. Everything works just fine if you use latest jqueryui.

[ScottIngram]

@cyberfoxlt - do you have some example code, perhaps a jsFiddle? I very briefly experimented with Gridster + Resizable, but stopped shy of trying to convert between pixel width/height into gridster col/row. http://jsfiddle.net/singram/PdjLE/

[dovys]

Parts of my code: http://jsfiddle.net/PrtrR/2/embedded/result/

[Disminder]

Good, but one problem - jQuery UI. Add this framework for one function? Not rationally, is it? And native support will be more stable I think..

[ScottIngram]

@cyberfoxlt - thanks for the fast response and spot-on example -- I'm fine with using jQuery-UI.  However, I think your code reveals a bug in the Gridster resize logic.  It doesn't always push other widgets out of the way when one is resized. 

To see this in action, perform these steps on your jsFiddle:

1. shrink the red "Ads Small" widget by 1 column
2. enlarge the orange "Logo" widget by 1 row.

The result is that "Logo" overlaps "Ads Small" although the grey "Main" widget slides down as though it's making room for "Ads Small" to move, even though it doesn't.    Furthermore, you can now drag and drop "Ads Small" anywhere on top of "Logo."  The above steps are only one example.  Try shrinking the green "Ads Top" widget" as step 0 and making the Logo wider in step 2.

I added debugging output, and you are correctly calculating the new height and width.  You pass these correct values to Gridster's resize_widget(), but, Gridster isn't correctly relocating the other widgets, at least not visually.  Other unsized widgets respond as though the incorrectly stationary widgets have actually moved to where they were supposed to... so Gridster is mentally moving the resized widgets, but not visually... and playing with it more, I see that moving a resized widget will restore correct behavior.

Should this be filed as a bug?  "Resizing a widget makes it immune to layout changes until it is subsequently manually moved."

---

From: cyberfoxlt notifications@github.com
To: ducksboard/gridster.js gridster.js@noreply.github.com
Cc: Scott Ingram github@scottingram.org
Sent: Tuesday, October 23, 2012 11:04 PM
Subject: Re: [gridster.js] Drag'n'resize widgets (#69)

Parts of my code: http://jsfiddle.net/PrtrR/2/embedded/result/
—
Reply to this email directly or view it on GitHub.

[raananraz]

Hi,
Same problem happens here.
When testing the example above once you resize "adsright" to half it's size.. try to drag feed so they will switch places..
it just overlaps one another.

[timatron]

Anyone got any ideas on this? I see this consistently when resizing a widget to the right into the last row of widgets. The last row does not update and stays put.

[raananraz]

In order to resolve this issue i did a small hack of removing the widget by calling: remove_widget
and then re-adding it to the same location but with it's new size using add_widget
hope this helps anyone...

[maxgalbu]

The issue is actually a conflict between jquery resizable and gridster
jquery-resizable sets a css top value after resize, then gridster changes the data-row attribute (which corresponds to a css top value in the generated css), but since there's already a top value there's no animation.
To fix it, just remove the top value added by jquery-resizable before changing data-row

it's a simple fix, see my fork: https://github.com/maxgalbu/gridster.js
here's the fiddle with the fix: http://jsfiddle.net/maxgalbu/UfyjW/

[timatron]

Thx for this fix!

[timatron]

has anyone gotten extra_rows option to work? I'm trying to put a few extra rows at the bottom of the grid, so that the drag to resize can fill them in, but the option doesn't seem to do anything for me. Also, is there a way to bind a function to after gridster does it's initial layout, so that I could just change the height of the gridster ul after load? ideas?

thx,
tim

[oooryan]

Hi there! I'm trying to get this working in a windows 8 store app to display some images...i imputed the above code from http://jsfiddle.net/maxgalbu/UfyjW/ and got it to display in the app..its works pretty well but i would like it to expand to the right instead of the bottom...how can set the height to stay the same and have the right right expand when needed? If i could just turn the entire grid counter clock wise and keep the elements the right way that would be perfect..but obviously i know its not that easy hahah

[paulklemm]

I have the same problem as timatron. Everything works fine, except if you want to expand an element at the very bottom at the gridster container. It automatically expands itself when you drag and drop elements, but not when you resize objects. I assume you have to trigger the dragging.start event manually if you want to do that, but I can't find a way to make it work! Adding additional rows using "extra_rows" would also be a workaround, but somehow gridster just ignores it when I append this to the configuration. Any ideas?

[timatron]

Same boat.

On Fri, Feb 8, 2013 at 6:14 AM, Powernap notifications@github.com wrote:

I have the same problem as timatron. Everything works fine, except if you
want to expand an element at the very bottom at the gridster container. It
automatically expands itself when you drag and drop elements, but not when
you resize objects. I assume you have to trigger the dragging.start event
manually if you want to do that, but I can't find a way to make it work!
Adding additional rows using "extra_rows" would also be a workaround, but
somehow gridster just ignores it when I append this to the configuration.
Any ideas?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/69#issuecomment-13286141.

[kfirdado]

Hi,
I have a fix for re-sizing the very botton element. The idea is to enlarge the gridster element height during the resize.
It works well on my environment, but on jsFiddle it has some scroll issues.
Here it the link anyway:
http://jsfiddle.net/UfPvA/1/

[nick-allen]

@kfirdado Check that the horizontal containment works as expected. The vertical resize works great, but it allows you to resize outside the horizontal boundary and messes up the rest of the grid on stop.

[gotwig]

Any proper fix for the bottom problem?

[carstingaxion]

He @gotwig, Did you have a look at the last mentioned fiddle? This solution is almost working, except in firefox. But the problem with this browser is not so big; it's just that firefox bugs with the used event property offsetY.
I went good by adding the following lines before if ( event.offsetY > layout.$el.height() ) { ...

// we need event property offsetY, 
// but firefox bugs with this
// so we set this by our own
// @see http://bugs.jquery.com/ticket/8523#comment:16
if(typeof event.offsetX === "undefined" || typeof event.offsetY === "undefined") {
   var targetOffset = $(event.target).offset();
   event.offsetX = event.pageX - targetOffset.left;
   event.offsetY = event.pageY - targetOffset.top;
}

[ekkuluri]

Hi, I want to resize only few widgets. Any ideas

Thanks

[druska]

You can set the resizable containment property so the widgets can't be resized outside of the grid. Example: http://jsfiddle.net/UfPvA/30/

[vieron]

This feature has been added into gridster: 8a09444