Drag-Drop events generate internal counters?

1

I'm trying to create a div every time I drop an image on top of another div , but the following is occurring:

  • At once: create 1 Div;
  • On the 2nd time: create 2 Div;
  • 3 times: create 3 Div;

Is there an internal counter in 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');
}
    
asked by anonymous 19.07.2017 / 22:27

1 answer

0

Without the rest of the code I can not be sure, but maybe this is a case of spreading the drop event to all div on the page.

My suggestion for you is to add stopPropagation to the drop function.

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

If this solves your problem, the issue is only the mechanism for propagating events running. If this is unknown to you, I suggest a search on the topic but in short words:

  

Events generated on child nodes are propagated to parent nodes. If any of the nodes up in the node tree (DOM) also have the listener ondrop defined with the function drop (or any other), this listener will be executed.

    
19.07.2017 / 23:18