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

  • 11 June 2023
  • 4 replies
  • 96 views
Jens Thiemann
Badge +1

Hi,

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

Robert Johnson
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 glitch.com - 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:

 

Visual Thinker | Volunteer Community Moderator
Robert Johnson
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
Visual Thinker | Volunteer Community Moderator
Jens Thiemann
Badge +1

You can find the source code on https://github.com/jensthiemann/miroappsupport/tree/main

Jens Thiemann
Badge +1

Finally solved it.
Need to fetch the ondragstart event:
 

imgElement.ondragstart = function(e){

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

}

Reply


Terms & Conditions