Angular-gridster2: Allow dragging item out of grid container

[jharlan-nextcentury]

I would like to be able to drag a GridsterItem out of its containing Grid. For example, to another Grid or a toolbar.

I know you can use the emptyCellDropCallback to handle HTML5 Drag & Drop events, but it doesn't look like there is a way to set the dragstart event dataTransfer (or that dragstart is being used`?)

Any way to drag an item out of the grid and get some kind of reference to the item when it is dropped would be great.

Thank you!

[tiberiuzuld]

Hi @jharlan-nextcentury ,
There is no support to drag an item from a grid to another now.
You can set on the item your own attribute drag-start and handle the start. Not sure if it will work.
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondragstart

Will try to add directly from library support for this in version 5

Thanks

[cmark11]

Is this planned to be available on March 31, 2018? I want to be able to drag from one gridster to another gridster.

[tiberiuzuld]

Hi @cmark11 ,
Yes that is the goal. Not a promise.
The idea is that I want to have finished all the breaking changes for 5.0 first.
Will release 5.0 when angular releases 6.0
Angular 6.0 will be release in March there is no specific date.
That is why I putted the milestone end at the end of March.
Any features that will not be done by then will be done in a 5.x release.

[cmark11]

I am looking at gridstack, that has some support for this, but prefer to use angular-gridster2 if this is available. Thank you tiberiuzuld for putting this in the upcoming milestone.. I am happy to help test if there is an option. Looking to be able to do something like this:

I have on a single page, 2 gridstack container areas (one could be from some template in a router-outlet).

Dragging one box that is sized 2x2 from container1 to container2, will result in that container showing up in container2 with the same 2x2 dimensions. If the grid is not sized in a way that has room for it, then having some way to see that programmatically to be able to alert user the user that there is no room is preferable. If the move is successful, then the original item in container1 should be removed of course.

[cmark11]

Is there any chance this could be done before Angular 6 release? Looks like it might be April when it happens...

[tiberiuzuld]

Don't have time for this week to work on this since it takes some time to make it.
Only next month probably.
I welcome any PR for it if anyone wants to implement it.

[cmark11]

I am happy to help. Is there some guidance you can give on what needs to be done/files need to be changed? I need this sooner than later. If too complicated, wish you make this a higher priority than others.

[tiberiuzuld]

In the https://github.com/tiberiuzuld/angular-gridster2/blob/master/src/lib/gridsterDraggable.service.ts file needs to be modified to support the drag in another grid.

Probably the drag needs to be re implemented to function with HTML5 drag&drop.
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
DataTransferItem should be set on dragStart with the item object from GridsterComponent.item which is the object the user of the library gives to the grid.
On drop the item should be removed from source grid.
The drag service needs to listen for dragOver to update the preview and drop event to add the item to new position/insert.

This is optional and separate of above things but:
The grid already supports native HTML5 drop with option enableEmptyCellDrop.
There we need to support to take optional item from DataTransferItem.
If gridsterDraggable is will support drop events then maybe we don't need this option anymore.

[tiberiuzuld]

Status update:

• started working on this
• refactored some parts of drag service. Works pretty nicely.

Left to do:

• still have a few issues to resolve: drag in scrolled content, support touch again.
• add possibility to transfer item between grids and make it work
• deprecate the emptyCellDrop option since drag will pretty much do this.
• maybe migrate resize also to native drag&drop

Current work is on branch drag.

Hoping to finish this next week.

[Nicolaslup]

HI,

i try to drag an element in grid but i don't understant how it's work, i'm beginer and i don't understand how it work. I watched documentation api drag and drop and i know make drag and drop simple in javascript native but i don't understant how implement this with gridster2. Is It possible to show me the function you use in documentation when we click on Enable drop to drag in Empty cell?

Thank you :)

[tiberiuzuld]

Hi @Nicolaslup ,
The code for the demo is here https://github.com/tiberiuzuld/angular-gridster2/blob/master/src/app/sections/emptyCell/emptyCell.component.html#L29

Will try to add links to source directly from demo.
Thanks

[tiberiuzuld]

Status update:

• fixed support for touch

Sorry for the slow progress, didn't had the time lately, hopping to finish this month.

[tiberiuzuld]

Status update:

• fixed drag in scrolled content

[Nicolaslup]

Hi thanks for your response, i didn't understand how search in doc :).
I have an other question if you can help me :).
I tried to pass data item with dataTansfert.setData() but i don't arrive to get item.
then i created getter and setter in a service but i don't think it's a good method

function dragstart ====>
drag(e){
const id = e.target.id ;
this.dragservice.sendItem(id) ;
}

function for get item and add on dashbord ====>
emptyCellClick(event: MouseEvent, item: GridsterItem) {
item.id= this.dragservice.getItem() ;
console.log (item) ; // {x:0, y:0 ,cols:1 ,rows:1 ,id:1}
this.dashboard.push(item) ;
}

Is it possible to get item without passed by a service?

Sorry for my poor english i progress slowly ;)

[tiberiuzuld]

The library doesn't use tdataTransfer yet.
The only way to use the HTML5 drop functionality right now is to use the emptyCellDropCallback option.
This option will not use the item you set on dataTransfer will create a new item on position where you drag.
For more info you can look at the code for drag end here: https://github.com/tiberiuzuld/angular-gridster2/blob/master/src/lib/gridsterEmptyCell.service.ts#L110

[Nicolaslup]

Ok thank for your response :)

[tiberiuzuld]

Unfortunately hit some issues at the moment and will take more time than anticipated with this.
The issue is about how to drag behaves when dragging from one list to another and to clean up preview from the old grid, and on drop to remove the item from the old grid and add it to the new one. Need to redo the whole dragging code and separate things.

One thing I am thinking about doing is to make a huge breaking change and make the api and setup similar to ag-grid which will help me more with this issue to resolve.
Also will help me fix other outstanding issues e.g. animations, initialization, dynamic loading of components.

[PSAustin]

Hi tiberiuzuld,

Could you give an update on this enhancement please. Its a great feature which I am eagerly anticipating.

[marcojonudo]

Hi @tiberiuzuld!

Started with Angular and Gridster2 some months ago and having a gorgeous time so far. However, I need to implement some changes with multiple grid support. Are there any news related to this feature?

Thank you very much for your awesome work!

[tiberiuzuld]

Hello guys,
Yes I know a lot of people want this feature, I want it to :) but life sometimes gets crazy.
Unfortunately did had time in the past year to work on it, since for this feature requires to rewrite most of the library.
Currently my plan is to start working on it this month and most probably finish it next month.
No promises but this is my current plan which may change :) depending on other life stuff.

[marcojonudo]

Great to know it @tiberiuzuld!

Don't worry about it, I think lack of time is something quite easy to understand. I'll be following the development and glad to help in anything I can!

Thanks, and congrats again!

[kotrao]

Is this feature to drag items out of a grid added?

Thanks,

[ShradhaRao]

Hi @tiberiuzuld ,

I am using this plugin and its working perfectly fine. :) However, one of the scenarios include drag and drop between multiple grids and not sure if this feature is added or not? Is there a way that i can implement even without the library support. Thanks !

[marcojonudo]

Hi @tiberiuzuld ,

I am using this plugin and its working perfectly fine. :) However, one of the scenarios include drag and drop between multiple grids and not sure if this feature is added or not? Is there a way that i can implement even without the library support. Thanks !

My case was identical, and I decided to implement my own draggable directive. This tutorial helped me, and it is working fine in my project while @tiberiuzuld finds time to add this functionality.

Hope it helps!

[mladenbrankovic]

Hi @marcojonudo
I'm having a somewhat hard time implementing a custom directive into our project and connecting it to the grid. Would you mind sharing your source code, so I can get an idea of how you did it?

[marcojonudo]

Hi @marcojonudo
I'm having a somewhat hard time implementing a custom directive into our project and connecting it to the grid. Would you mind sharing your source code, so I can get an idea of how you did it?

Hi @mladenbrankovic!

I would be glad, but the custom directive is part of a bigger project owned by my company. I can, however, give you some tips you may find useful.

• Create an overlay in the upper level of the DOM. The item you clicked on should be replicated in this overlay, allowing it to move along the whole area. If you want to move the item in the screen, it should be 100x100%.
  The coordinates of the dragging element should be gotten using a pointer move event, and sent to the overlay (for example, with a subject). Keeping track of them will make it possible to refresh the DOM with the position of the item.
• When an item is clicked, it should be hidden, creating the replica at the same time. This way, there would be only one visible item.
• When an item is dropped, I used pointer enter and pointer leave to identify the dropzone. If I drag the item inside a dropzone, I save its data (dimensions, for example) so I can replicate the item when dropped.
  What to do when dropped depends on the requirements. In my case, pixel precision is needed, so I calculate the exact coordinates of the destiny position to move the item there. If this is not your case, you could just add the item to a list and trigger the CD to refresh the DOM.

The main concept is that an item is clicked on the origin container; replicated in the overlay to be moved in front oh other divs; and replicated again in the destiny container when dropped.

I guess the procedure is quite difficult to follow without the code. Again, I strongly recommend the tutorial I linked in my last comment. Even when my directive is quite different, I found it really usefull to get the basic ideas and understand several concepts.

Hope this helps!

[gitalvininfo]

Can I ask if what is the status of this issue? I'm planning to also implement this use case.

[marcojonudo]

@gitalvininfo no news, as far as I know. I guess we'll need to seek alternatives.