Help with drag and drop of images // works only when dragging it twice

  • 11 June 2023
  • 4 replies

Badge +1


I want to create an app, which allows dragging images to the Miro board.
I am using JavaScript vanilla.

My problem:

When dragging the image to the board, nothing happens
Moving the mouse back to the app window, the cursor changes to the symbol:

When now dragging the same image to the board, it is added.


Additional information:
When using it with any other element, like text, it works fine. Only for images, I need to drag them twice. 

Adding console.log, I can see, that my drop event which added the images, is only called when dragging the image the 2nd time.

Any hint/clue, what I am doing wrong?

4 replies

Userlevel 7
Badge +12

@Jens Thiemann - A few months ago, a friend helped me get the drag-and-drop example app up and running using - we downloaded the example app from Miro’s GitHub page. It is working as expected for me.

Have you referred to Miro’s documentation on drag-and-drop or the example app for reference?

The Community could surely help you quicker if you shared the code you using - you could do so in this post:


Userlevel 7
Badge +12

@Jens Thiemann - A few more options for you:

  1. Join the June 15th Build a "Drag and Drop" app with Miro! webinar.
  2. Ask your questions in the Miro Developer Platform Discord channel
Badge +1

You can find the source code on

Badge +1

Finally solved it.
Need to fetch the ondragstart event:

imgElement.ondragstart = function(e){

  e.preventDefault(); e.stopPropagation();