Move items between two or more grid-stack containers

Hi, I would like to have two or more grid-stack containers and move the items (portlets) between them. How to register this containers, so the portlets can be moved from one to another container? And after that, how can I become the serialized positions for each container?

Example:
[div class="grid-stack" id="grid-nav-left"][/div]
[div class="grid-stack" id="grid-body"][/div]
[div class="grid-stack" id="grid-nav-right"][/div]

Thanks!
Nik

@troolee

Hi guys, no one knows about this issue? @troolee do you know how to use it or maybe give me a tipp what to do for this feature?

Thanks
Nik

I'm interested in thuis too. My scenario is that i want to have a toolbar from which users can drag items onto multiple gridstack. Any printers in the right direction would be appreciated.

+1

👍

I just initialized two grids, rather than the random class name for
example '.grid-stack-22113' generated by grid stack I made the class name
an option then initialized each grid with active and inactive class name....

On Fri, May 29, 2015 at 3:57 PM, Antonio Bologna notifications@github.com
wrote:

[image: 👍]

—
Reply to this email directly or view it on GitHub
#133 (comment)
.

Could you please elaborate, sir.

@alangunning

@alangunning I have trying your solution, but doesn't work for me. Do you have some sample code?

@alangunning

@alangunning Did you actually get it to work? Or were you just writing off the top of your head? Cause your solution doesn't seem to work. However, I'd love to be proved incorrect. So please, it would appreciated if you were to share with us the code you wrote that actually got it to work.

@alangunning

Apologies, I have been very busy in work. I will try code up a demo to
share later today
On Jun 2, 2015 10:57, "Enrique Caballero" notifications@github.com wrote:

@alangunning https://github.com/alangunning Did you actually get it to
work? Or were you just writing off the top of your head? Cause your
solution doesn't seem to work. However, I'd love to be proved incorrect. So
please, it would appreciated if you were to share with us the code you
wrote that actually got it to work.

—
Reply to this email directly or view it on GitHub
#133 (comment)
.

@enriquecaballero

@enriquecaballero @nnikolay
I have provided a rough demo of the concept for now.To save time I made my changes in Dev branch of my own fork of this repo. Will contribute back asap or feel free to re-use any of the code.
Demo can be viewed at: http://alangunning.github.io/gridstack.js/demo/multiple-grids.html

@alangunning

@alangunning Looks good! Is there a way to actually have it animate while I drag from one container to another? With placeholder, etc.

@alangunning

@alangunning this is great! Many thanks! Can you please take a look at the resizing of an item. For example it is not possible for me to resize the item 2, because it overlaps item 3 and item 3 don't move.

@enriquecaballero

@enriquecaballero I did not implement this functionality as it would require a lot of re-calculations that I did not require for my workflow. I simply allow to drag and drop a widget in order to add to another grid. You can see in my sample code that I set auto_position = true in add widget function so that will use existing gridstack core library to place the widget in any available position.

@nnikolay All active widgets are re-sizing fine in all desktop browsers I've tested. Do you mean that when you extend widget 2 that widget 3 does not move down to next row ? In my example I have limited my grids to 6 rows which is preventing this as the grid is full. If you want it to do that, you will need to remove gridstack option 'height' to remove row limit and also adjust the appropriate css accordingly.

Ok folks, I've finally done this. It has experimental status right now and gonna be it up to 1.0.0 so use it with caution and let me know it you see any issues (with behaviour, events, etc).

It probably has issues with knockout/angular/etc so it needs to be checked.

I'm closing this issue so feel free to open new ones in case of bugs.

Next, we likely to release 0.2.5 as it is right now and all issues you find will be fixed in 0.3.0.

Cheers.

+1

Hi,
Could you please let us know how to enable this experimental option?
I have tested with the following option without any success: acceptWidgets: 'grid-stack-item'.

Actually, I cannot drag out from the grid-stack container.

By the way, thanks for your incredible work!

Cheers.

It should be selector .grid-stack-item. Please check out a demo http://troolee.github.io/gridstack.js/demo/two.html

@derekm

@derekm I currently have the same issu, were you able work it out?

@alangunning

@alangunning
I have a question about your posted demo with active and inactive widget grids.
How do you get the ID of a single widget?
I want to add content to the widgets, but the <div class"content"> tag adding the content to all widgets.

How can i manage only one widget?

I already using the data-widget-id, but if I am using the id in the template div, the widgets do not change the content.

`

<div data-widget-id="1" class="widget">
    <div class="grid-stack-item-content">
        <div class="portlet-header" style="vertical-align: middle;">
            <span class="header"></span>
        </div>
        <div class="content">
            dfdf
        </div>
    </div>
</div>

        <div class="content">
            fdfdfdfdfdfdfasdfasdfasdf
        </div>
    </div>
</div>

`

This does not work...

Have anyone an idea?

Thanks

Is anyone here?

Can you please any one help me on this?

Thanks in advance!!

Could you possibly support drag and drop WITHOUT removing the dragged element from its original parent? In my case I want to have a sidebar that contains element that have to be cloned when dragged onto a grid. Looking at the code, the draggable is simply removed after a clone is made:

var el = $(ui.draggable).clone(false);
el.data('_gridstack_node', node);
$(ui.draggable).remove();

The call to remove the draggable should not occur in my specific case. It should only occur when dragging and dropping from one gridstack to another gridstack but not from my sidebar.

Did anyone find an update to this ? For layout designs once a widget is dragged, it would be helpful if it's not removed from sidebar.

@mandys

@mandys That feature doesn't exist yet, but I'd be happy to add it to our plans for the future.

So that I'm sure that we'll be satisfying your need - you want the ability to clone a widget rather than move a widget in particular instances. Is this correct?

@radiolips

That is correct @radiolips. I think I found that to be one of the most requested features (across some GitHub tickets). Has anyone written a patch for it yet ? Even if it's not available in the core and there is a patch it would be helpful.

No one has yet written a conditional patch, though a few people have made attempts at alterations.

You can see the near-term plan for gridstack here. It doesn't include this feature and I'm unsure if it'll be available for version 1.0. The changes for 1.0 are necessary for the library to mature, but I agree that there have been many requests for this cloning capability as well.

I'll take a look at reprioritizing some enhancements to see what I can do about getting this readied for you sooner.

{draggable:{ revert: true, helper: "clone" }}

JqueryUI has this function, but it doesn't work here

Navigation Menu

Repository navigation

Move items between two or more grid-stack containers #133

15 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Move items between two or more grid-stack containers #133

Description

Activity

nnikolay commented on Apr 17, 2015

ronvanpol commented on Apr 18, 2015

enriquecaballero commented on May 29, 2015

abologna-r7 commented on May 29, 2015

alangunning commented on May 29, 2015

enriquecaballero commented on May 29, 2015

nnikolay commented on May 30, 2015

enriquecaballero commented on Jun 2, 2015

alangunning commented on Jun 2, 2015

alangunning commented on Jun 3, 2015

enriquecaballero commented on Jun 3, 2015

nnikolay commented on Jun 4, 2015

alangunning commented on Jun 4, 2015

15 remaining items

troolee commented on Mar 1, 2016

marshmeloo commented on Mar 1, 2016

Coopyrightdmin commented on Mar 4, 2016

troolee commented on Mar 4, 2016

g-javi commented on Jul 6, 2016

griphi commented on Jul 21, 2016

griphi commented on Jul 26, 2016

dharmeshkotadiya commented on Sep 30, 2016

ronvanpol commented on Nov 15, 2016

mandys commented on May 10, 2017

radiolips commented on May 10, 2017

mandys commented on May 10, 2017

radiolips commented on May 10, 2017

huangzh123 commented on Jul 10, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions