ducksboard / gridster.js Goto Github PK

Hi,

Would be great if the plugin can generate the elements position based on the size of the boxes.
This could help for those who want to use in dynamic environment (ex. when user adds the blocks).

Seen on Chrome & Firefox (both latest).
If I use the .resize_widget function, the widget resizes as expected, but after that the collision model doesn't fit the cols and rows anymore, it seems to have doubled margin around the box, but only for the resized box. The others are still intact, but may produce overlays now and also ignore the box margins, if they have to push the resized box. This appears only on changing the cols. If changing the rows the collision model just doesn't resize, but still works correct.
Also the Preview Container is not scaled to the new size in both directions. It still have the origin size.

would be nice can resize the widgets, when drag the corner this change its size to 2,3,4... columns or rows...

For example if I click the widget it would get removed

When adding a textbox to a draggable grid, the only way to set the focus to it is using alt. Having only doubleclicks start the draggable action might be a solution. Perhaps single or double click can be an init option.

Adding a widget to a specific column and row position (4 and 8 in the example below) places the widget in the exact same position even when there are no widgets in say row 5, 6 and 7.

    gridster.add_widget('<li></li>', 1, 4, 4, 8);

This creates a new widget of size 1x4 at position 4,8. When there are few other widgets the newly created widget does not automatically reposition to the top most available position in the layout.

When any other widget is dragged after adding this new widget, the new widget repositions to the top available row.

Is it possible to reposition the newly added widget to the top available row (same column) immediately after adding ?

Is there a function that can be called to reposition the widget to the top available row (same column) automatically?

Thanks, and great plugin BTW ! :)

Hi ducksboard!

Great work on this library!

I am working on a fork of this to add some behavior and and options that I need. And I am wondering about the min_rows behavior.

It seems to limit the widgets when you try to drag the widget to the bottom of the columns, but not prevent other widgets from being displaced down, is this intentional?

I'm trying to retrieve the coords for the block that just changed place in the grid. how do i do that?

that is what i have so far:

var gridster = $(".gridster ul").gridster({
    widget_margins: [10, 10],
    widget_base_dimensions: [140, 140],
    max_size_y: 3,
    serialize_params: function($w, wgd) {
      return {
        col: wgd.col,
        row: wgd.row
      };
    },
    draggable: {
      stop: function(event, ui) {
        console.info('yep');
      }
    }

Trying to look in my chrome & safari browser on my iphone and I could not see the drag-and-drool example.

I've created my own barebones demo and when using the add_widget function to add a new block, 2 blocks are always added rather than one. They are added on top of each other so you don't see it until you drag the first one away. When looking at the code, this is the generated code:

Both of those elements are created.

It would be nice if the grid system detect any change on size / position so it refresh automatically the entire grid.

Good job by the way!

I think the biggest fundamental missing feature is the ability to calculate a grid based on a specified set of elements.

As far as I can tell, the only way to get elements positioning properly in a grid is to first define all of the positioning in the html data attributes on each element. data-col and data-row keep showing up as NaN which breaks everything.

It would be great to be able to call $('element').gridster({arguments here}) and based on container size and specified arguments generate values.

Currently, I can add widgets to the grid via gridster.add_widget(..) using the row and column parameters. But I'd like to add a widget in a row/column related to a X/Y coordinate like the one from a Jquery event.

Every JQuery event receives an "event" object with a pageX and pageY attribute, which I use to know where the user double clicked. I want to be able to add_widget in the cell enclosing that x/y point.

How do I get a row/column number based on that x/y coordinate with the current API? I don't see anything like it, the closest thing seems to be Coords but I'm not sure. An alternate add_widget ( x, y) method would be great, though :-)

When I am calling
gridster.serialize();
I don't get the elements in the currently sorted order.

What should I use to get the currently sorted order out?

Hi dear Gridster team !

I have a new issue on my zoning tool :

I made a little "Widget edit" function so I can change the widget size. I would like to know if there is a clean way to do it.

For instance in my tool http://floflow.me/_sites/zoning/, when you try to resize the "Logo" widget (click on the pen) height from 2 rows to 4 rows, the menu under doesn't move so the grid is unusable :/

Thanks in advance for your help !
Flow

Hi,

I found something weird with the addition of new widgets. I created a resize button for my widgets, the button is inside the widget. It works very well with the preloaded widgets (in my html).

Here is a sample: http://jsfiddle.net/benjaryu/gd4tc/10/

However, when I add a widget with a resize button in it:

  //add box
$('.addbox').click(function(){
gridster.add_widget('
Test the menu HERE !!!
resize me!
', 1, 1);
  });

The resize button doesn't work in the new widget. How can I fix that ?

Thanks :)
Regards,

Benjamin

PS: Btw, great job with gridster, I really love it!

Hi there, first off I cannot thank you enough for this plugin—it is seriously the bomb and playing a big part in an application I'm currently working on.

Sadly a recent update—the changes to the drag/stop callbacks on Aug 13—introduced some undesirable behaviour. If an anchor is inside a widget, and you click on it and begin dragging, the link will fire on MouseUp or when dragging stops. (Not sure which specifically.)

(Desirable behaviour in our application is to have a widget which is dragged around, but when clicked, takes you to another page.)

Hello
there are some problem while draging the box. the box goes down when you try to move it. I think it's better to test it yourself. I'm not sure that it's a bug or not. But i thought it's better to tell.

Hope to help.

Siamak.A.M
blacksrc.com

Is possible by variable or option to activate or disable the drag and drop function, because I put buttons in the widgets and when I push the buttons the widget activate the drag and drop function.

In an attempt to make gridster responsive i'm removing the list container and re-render with different parameters, it works fine for 2,3 steps but after those gridster doesn't update the values.

This is very strange because i completely remove the old element from the dom ( $('#collections').remove() ).

I have the feeling that gridster doesn't completely reset his previous values.

i've uploaded a simple demo (see app.js from line 106 to line 167)

http://assets.mountainthemes.com/readie.zip

update : i think it's a problem caused by autogenerating styles

Hi,

I think the positioning of the cols are wrong. Currently the widget_margins are added on every element (on every side) but due to the absolute positioning it seems wrong, because looks like the first col is starting in wrong place (its not positioned in the middle).

I hope i was clear, if not you can check it out here: http://dev.inhosting.ro/test/gridster

Here i used 10px margin and the blocks stands out from the container. I think the positioning should start at 0 not at margin value.

Hello,

I'm trying to move automatically an element to another position in the grid with javascript (well, really I want to create a mini-puzzle game, mixing all the elements at the game start)

I've looked the documentation and I've saw the method "manage_movements" to automatically change the position of one element, but I don't know well how to use it :S

Can you give me a hand whit this?

Thank you for the help.

I tried to add a widget that was the width of an entire row and gridster apparently gave up on it, positioning the contents of the li randomly. What gives?

Is this compatible across most browsers? Works in Chrome and Firefox for me, but refuses to even run in IE9...

Simple example with jQuery 1.7.2

<div class="gridster">
  <ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
</ul>
</div>

   $(document).ready(function () {
            // Gridster
            $(".gridster ul").gridster({
                widget_margins: [10, 10],
                widget_base_dimensions: [140, 140]
            });
});

I get in my browser when I try to move a grid item. Cannot read property 'size_y' of undefined

Easiest to convey this with a video: http://screencast.com/t/05wwm3l9Yfp

I was looking at the demo(btw, it would be nice to include it in the dist.), and I couldn't see where you added sprite.png on the drag element.

However, this has awesome possibilities, and I'm pleased with the cross browser support.

This happens in Android and iOS browsers.

I want a callback when I dragged the widgets done. I think gridster.js need some callback, and let user do something others.

Very nice plugin :-)

Have you guys plan to provide Tablets support (iPad, Google Nexus,...) ?

Thanks

In https://github.com/ducksboard/gridster.js/blob/master/src/jquery.draggable.js#L22 document.body is accessed, even though it might not be defined yet.

A solution would probably be moving that assignment inside Draggable.init.

I'm using the extra_rows/extra_cols and playing around with 1 element. It always snaps up to the top row as expected.. Is there anyway to have it snap to any row other then the top if you use extra_rows?

Is it possible to match two grids (ie) like match the following in any quiz..If possible any one kindly send me the code.

I'd suggest that data-col et al should be namespaced. With such generic-sounding attrs, the likelihood of collisions with other libs and/or on-page code is quite high.

Ex: <li data-grdstr-col="1" ...> <!-- js := grdstrCol -->

$0.02

Ability to change size of a block on the fly. (in API) This would probably cause some reflow.

related is also that serialize should return the sizey and sizex

Hi everyon, in case this is not a known issue :

Based on your example from http://gridster.net/

https://www.youtube.com/watch?v=E4Rp16QIKb8

Would be great if the grid can be made responsive.

I have problem with gridster - i have box in grid, loaded data from ajax database so height on box was changed, i want to have box with data-sizey like 3.2349 for example, but when i changed fn.register_widget function on source code from parseInt to parseFloat that dsnt working. What can i do?

Hi guys, first thank you for you wonderfull work !!!
I'm trying to create something with it but I have an issue.

THE WIDGET 22 col width doesn't work, can you help ?

Here is the link of the page :
http://floflow.me/_sites/zoning/

Thank you in advance for your time !

Can you use the http://pep.briangonzalez.org/ pep.jquery runs very well and is possible to run in my android tablet... with this you can use this drag and drop method for the compatibility problems.

First off I just want to thank you for the great work you've done. It's awesome!

I want to be able to drag a widget to a row that doesnt have a widget directly above. Right now you cna only drag widgets to a row that is directly under another widget. basically i dont want the widgets to always realign so that they are top-aligned. I want to be able to snap them to any cell in the grid regardless if another widget is directly above or below it.

I would like to use this great sript on backend where working fine, but i need on the frontend as well without the drag & drop (only markup generated by the script, i would like to avoid the math part to do manually), is there any method to disable the drag & drop after load? I tried with the disable() function but i`ll get error "object has no method".

Giving a better explanation:

When dragging a card to next column left/right, as soon as we arrive to the middle of the next card (column), movements gets triggers so the cards rearrange.
The same happen when dragging up, as sson as we arrive to the middle of the upper row, a movements gets trigger to relocate the cards.

But when dragging down, when dragging until the middle of the next row, doesnt trigger a movement. Only triggers when you arrive to the middle of the next-next row.

I debug until here in line 1735:
var can_go_widget_up = this.can_go_widget_up(wgd);
this function returns false,and it should return true for this case??
kinda a complicated debugging further... :(

Any idea?

This has a big performance impact in grids with a lot of widgets.

code：

    <ul style="height: 480px; position: relative;">
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="1" class="gs_w"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="gs_w" ></li>
        <li data-row="3" data-col="2" data-sizex="2" data-sizey="1" class="gs_w">
            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </li>
        <li data-row="1" data-col="3" data-sizex="2" data-sizey="2" class="gs_w"></li>
        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1" class="gs_w"></li>
    </ul>

after init() , ul > li > ul > li , have className ".gs_w" , why ?

            <ul style="position: relative; ">
                <li class="gs_w">1</li>
                <li class="gs_w">1</li>
                <li class="gs_w">1</li>
                <li class="gs_w">1</li>
                <li class="gs_w">1</li>
            </ul>

delete this

Hi. I'm playing around with Gridster (http://jsfiddle.net/lwojcik/ZCkwz/1/) and trying to bind events on start/stop dragging. The doc says that it's possible to use options draggable.start / draggable.stop. However, I have no clue how to use them (where to put them in the code). Could you provide any example of gridster call with start, drag and stop events?

which is not what you want...

Scenario is to have a box in gridster which contains a scrollable div. (overflow-y: scroll, and fixed height). If the user scrolls in the box, the drag action begins on mouse up. Which means that the user has completed their interaction with the box and begins to move their mouse away, simultaneously bringing the box with it.

Does anyone have any suggestions on how I can disable this so that the scroll action on the box disables the draggable functionality of the box, but the user can still grab the box with any other standard mouse interaction and drag it in the layout (as intended)?