Angular-gridster2: Preview of element when added by drag&drop

Created on 22 Feb 2018  路  5Comments  路  Source: tiberiuzuld/angular-gridster2

Is it possible to get a preview of a new gridster element which is added by drag n drop.
eg when dragging the link ("Link to Google") in the demo (add by drop enabled) a new preview element should be added and moveable when holding the mouse down and moved over the grid.
I tried to illustrated it here in the following image:
gridster_dnd

enhancement

Most helpful comment

Added in v5.0
The normal gridster-preview will appear when using HTML5 drag and drop.
The fix for the lag was from NgZone, dragOver is now executed outsideAngular.

All 5 comments

Hi @Konstruktour ,
If you are refering of the native drag and drop from outside the grid.
Tried that is very laggy when I use the dragOver callback
https://developer.mozilla.org/en-US/docs/Web/Events/dragover

Will try again in version 5 maybe it will move better.

Added in v5.0
The normal gridster-preview will appear when using HTML5 drag and drop.
The fix for the lag was from NgZone, dragOver is now executed outsideAngular.

Do we have sample code snippet that shows on how to drag from outside and drop inside gridster

Would it also be possible that a new gridster element is shown instead of the gridster-preview (background)? Also the behaviour of the temporary new element would be the same as the elements which are already part of the gridster. (so eg that the drag element also pushes or swapes other elements)

Sign that - would be great if we could actually define a clone to be dragged (some sort of custom element) and if the behaviour of that drag-element would match the already existing items within the grid (e.g. pushing existing items away) like Konstruktour suggested.

Was this page helpful?
0 / 5 - 0 ratings