Drag-Drop events generate internal counters?

Asked

Viewed 40 times

1

I’m trying to create a div every time I drop one image on top of another div, but the following is happening:

  • At 1 time: creates 1 Div;
  • In the 2nd time: creates 2 Div;
  • In the 3rd time: creates 3 Div;

Is there any internal counter in the events ondragstart and ondrop?

<img ondragstart="dragStart(event)" class="icon" src="imagens/01.jpg" />

function dragStart(event) {
  elem = event.target.getAttribute('id');
}
function drop(event) {
  $('<div class="img"></div>').appendTo('#centro'); 
  $('#'+elem).appendTo('.midia');
}
javascript

1 answer

0

Without the rest of the code I can’t be sure but perhaps this is a case of spreading the drop event to all div existing on the page.

My suggestion to you is to add one stopPropagation in function drop.

function drop(event) {
  event.stopPropagation();
  $('<div class="img"></div>').appendTo('#centro'); 
  $('#'+elem).appendTo('.midia');
}

If this solves your problem, the question is only the mechanism of propagation of events working. If this is unknown to you, I suggest a search on the topic but in short words:

Events generated in children nodes are propagated to parent nodes. If any of the nodes at the above levels in the node tree (DOM) also possess the Software ondrop defined with the function drop (or any other), this System will be executed.

  • That didn’t work out. I entered after Alert(Event.isPropagationStopped()); to test if it is even by the propagation of events and it turned true with the continuation of the problem.

  • 1

    The problem is the class name, media. Every time I send an image, it creates one in Div, but it also sends in the previous Div that has the same name. I will try to create a classless Div or change the class names every time an image is created.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.