TL;DR
<img draggable={false} />Intro
Lately, I’ve been working on implementing a drag-and-drop feature using @atlaskit/pragmatic-drag-and-drop. The draggable items I’ve added are Note, Link, and Image.
The main difference between these three items is that Link and Image contain an image, but Note does not. And something strange happened—it looks like all three items can be dragged, but only Note can be dropped onto the target element.
Debug And Solution
As I said earlier, the issue seems related to whether the element has an image. So, I tried removing the image element from Link and Image, and both worked. No doubt, it’s because of the image.
Also, during debugging, I remembered that images themselves can be dragged. The issue has now changed to figuring out how to prevent images from being draggable.
ok, fine. After searching, the solution is clear - just set drggable to false . That's enough.
Reference
Disable dragging an image from an HTML page
TL;DR
Intro
Lately, I’ve been working on implementing a drag-and-drop feature using
@atlaskit/pragmatic-drag-and-drop. The draggable items I’ve added are Note, Link, and Image.The main difference between these three items is that Link and Image contain an image, but Note does not. And something strange happened—it looks like all three items can be dragged, but only Note can be dropped onto the target element.
Debug And Solution
As I said earlier, the issue seems related to whether the element has an image. So, I tried removing the image element from Link and Image, and both worked. No doubt, it’s because of the image.
Also, during debugging, I remembered that images themselves can be dragged. The issue has now changed to figuring out how to prevent images from being draggable.
ok, fine. After searching, the solution is clear - just set
drggabletofalse. That's enough.Reference
Disable dragging an image from an HTML page