I implemented drag and drop in my progressive web app like in this example of the w3school. In Google Chrome you can see the element while dragging, in the installed Google Chrome Web App you only see an icon of a world.
(Left side: Google Chrome Desktop Web App, right side: Google Chrome browser)
Does anyone know how I can get the same behaviour as in the browser also in my desktop web app?
Here my code so far:
import React from 'react'
export function Selector({ id, onDragStart }) {
return (
<div
id={id}
className="selector px-3 py-2"
draggable={true}
onDragStart={event => {
onDragStart()
event.dataTransfer.setData('chart_type', event.target.id)
event.dataTransfer.setDragImage(event.target, 0, 0)
}}
style={{ cursor: 'pointer' }}
>
{id}
</div>
)
}
Source code of the project: Source Code