Drag and drop .url issue

| By Webner

Chromium-based browsers (chrome and edge) recently produced issues related to drag and drop hyperlink HTML elements.

I had a list of file names in the grid in my application and file names were created as hyperlink (<a></a>) elements which were allowed for dragging. The whole grid was customized for dragging and dropping based on original files from the desktop to our web, third-party apps to our app, and based on custom content with drop effect as ‘copy’ by dragging and dropping the hyperlink elements within the grid itself.

ev.dataTransfer.setData("text", “<custom-data>”);
But in the recent version, hyperlink elements started producing issues as it was generating a .url file automatically and it interfered with other conditions for dragging and dropping.

Drag and drop

Quick solution to resolve this is:

Replace the <a> tag with some other element. Or
Create any other parent element like ‘<div>’ or ‘<p>’ for ‘<a>’ anchor tag. Set the <a> tag draggable false.
If you want to stop the drag-drop event or any kind of events for child elements like for <div><a> ..</a><div> stop event firing for <a class=’test’> and allow events for parent element <div> only , it can be done using css property for child elements:

pointer-events: none

Leave a Reply

Your email address will not be published. Required fields are marked *