drag and drop from external component across browser windows

Question

1. I'd like to knowhow to drag and drop to scheduler from a grid from another browser window.

That is, a scheduler component on browser window A, and a grid is on browser window B. How to drag the grid (from B) to the scheduler (on A) with some grid's info so that I can doing something in B.

2. How about dragging and dropping between two grids on two browser windows?

Thanks for your help.

Ram Raju Elaiyaperumal · Answer

Hi Raymond,Unfortunately, due to the security limitations of the web
browsers, it's not possible to perform drag and drop operations between two
different browser windows or tabs. This is because each window or tab is
considered a separate instance and they do not share JavaScript context or DOM
elements.

Please let us know if you have any further questions or concerns.Regards,Ram

Raymond Ho · Answer

Ok, thanks for the prompt response.Would it be possible to do something like this: https://jsfiddle.net/n7N9p/4/This example illustrates drag and drop across browser windows (you can open two browser windows to try). It drops and send some text/json string to the destination browser window.

Ram Raju Elaiyaperumal · Answer

Hi Raymond,The standard HTML5 drag and drop API, which is commonly used for such operations, is confined to the window where the drag started. This means that it doesn't natively support dragging and dropping between different browser windows or tabs. The example you provided demonstrates dragging and dropping within the different browser window, where the data being dragged is attached to the drag event and can be retrieved in the drop event. While there are workarounds that involve using local storage and custom events, these solutions come with their own limitations and complexities. They require both windows to be from the same domain due to security restrictions, and they don't provide the visual effect of dragging an element from one window to another. We hope this information is helpful and encourage you to reach out if you have any further questions or concerns.Regards,Ram

Raymond Ho · Answer

Thanks for the reply.If we are ok with drag and drop from the same domain, can you provide a simple example how to do it with syncfusion's components?RegardsRaymond

Ram Raju Elaiyaperumal · Answer

Raymond,Unfortunately, due to the nature of these workarounds, we currently do not have a example using Syncfusion's components for this specific scenario. The implementation would largely depend on your specific use case and application architecture. However, the general idea would be to attach data to the drag event in the source window, store this data in local storage, and then use a custom event in the target window to retrieve this data from local storage when the drop event occurs.We hope this information is helpful and encourage you to reach out if you have any further questions or concerns.