Drop an item from one grid to another about angular-gridster HOT 10 OPEN

I would also love to see this feature.

from angular-gridster.

It should be possible and may be handled outside of the gridster instances. The gridster items are rendered with an ng-repeat outside the gridster code, so we have to look at a way to listen for an event fired when dragging over the other instance, remove the item from the old scope list and add it to the new scope list. From there I'm not sure if that would result in a new element being created or if it would be possible to move the li to the new container without freaking out ng-repeat.

Any ideas for how to accomplish this?

from angular-gridster.

A project named angular-ui-tree you could have a look, it can do this.
https://github.com/jimliu/angular-ui-tree

发自我的 iPhone

在 2014年4月26日，3:31，Dan Blaisdell [email protected] 写道：

It should be possible and may be handled outside of the gridster instances. The gridster items are rendered with an ng-repeat outside the gridster code, so we have to look at a way to listen for an event fired when dragging over the other instance, remove the item from the old scope list and add it to the new scope list. From there I'm not sure if that would result in a new element being created or if it would be possible to move the li to the new container without freaking out ng-repeat.

Any ideas for how to accomplish this?

—
Reply to this email directly or view it on GitHub.

from angular-gridster.

Has anybody had any luck implementing this?

from angular-gridster.

I haven't yet. I would probably use this as a guide:

https://github.com/angular-ui/ui-sortable

from angular-gridster.

Any news?

from angular-gridster.

Actually I have implemented this for our website.
What I did was I created 3 directives, one GristerMasterControl, which keeps a record of all the gridster that are present in the page. One MulitGridster which i hang on the same element as the grister it self, it adds itself on the GridsterMasterControl. And one FloatingGridster, which I hang on every gridster-item.

From there it is easy, just listen to the same mouse event, or watch when an instance of FloatingGridster is being moved. Calculate the distance from that gridster-item to every MultiGridster, and call a callback on the closest MultiGridster.

from angular-gridster.

Hi Pouja. Could you kindly provide a working demo of this on jsfiddle? I'm sure all of us would really appreciate it. I'm in the process of scoping out the requirements for our project and this is the only item we don't have a solution for.

from angular-gridster.

@freejack I have a draft here https://github.com/Pouja/angular-gridster/tree/feature/multi-gridster. It works, you can pull and check the demo.
But it is currently not in the final version. I still want to improve how you can identify which gridster item is which and wich gridster is which. Currently this is done by passing a 'model' attribute. And I still have to decide which way is the best or correct way to pass information.

Edit:
Another solution, which includes the description I wrote is this https://github.com/Pouja/angular-gridster/tree/feature/multi-gridster-2. As you can see in the demo (if you pull and run) you will see that you have to click to add the items. This is because the distance from a gridster item to a gridster needs to be calculated after the height, width, top, left etc are set for the div element. Otherwise you will get weird distances.

from angular-gridster.

hi, any news on this enhancement? thanks!

from angular-gridster.