In the snippet below, if the green box is dragged into an app such as Word or Notes, the ‘dragend’ event will fire when the drop occurs.
However, in Chrome v129 on macOS, when I drag the green box into an iTerm2 window, the text “plain text” appears in iTerm2, but no dragend event is fired.
This means that I can’t perform the necessary cleanup I need to do inside the dragend event.
Does anyone know why this might happen only when dragging to some apps, and if there is anything I can do about it?
When testing with Firefox, it works perfectly and I see the dragend event fire.
When testing with Safari 18, the dragend event fires immediately after the dragstart event, and I can’t drag the green box at all.
x.ondragstart = e => {
console.log('drag started');
e.dataTransfer.setData('text/plain', 'plain text');
e.dataTransfer.setData('text/html', 'html text');
}
x.ondragend = e => console.log('drag ended');
#x {
background-color: green;
height: 60px;
width: 60px;
}
<div id="x" draggable="true"></div>