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.
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.
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:
Leave A Comment