Html 5 nested drag and drop using jQuery

Question

Hello I've created some demo with html5 drag and drop. I have nested dragable containers. When I'm trying to drag an element on child container it appends element on both containers. How can I fix that part? Please Help me.

Here is my example`

html

<div id="div1">
  container 1
  <div id="div2">
    container 2
  </div>
</div>
<br>
<img id="drag1" src="http://www.w3schools.com/html/img_logo.gif" width="336" height="69">

jquery

  $(document).ready(function() {
  var drag1 = `<img src="http://www.w3schools.com/html/img_logo.gif"  width="336" height="69">`

  $("#div1").on("dragover", function(e) {
    $(this).css('background', 'yellow');

    e.preventDefault();
    e.stopPropogation();
  });

  $("#div1").on("dragleave", function(e) {
    $(this).css('background', 'none');

    e.preventDefault();
    e.stopPropogation();
  });

  $("#div2").on("dragover", function(e) {
    $(this).css('background', 'yellow');

    e.preventDefault();
    e.stopPropogation();
  });

  $("#div2").on("dragleave", function(e) {
    $(this).css('background', 'red');

    e.preventDefault();
    e.stopPropogation();
  });

  $("#drag1").on("dragstart", function(e) {
    e.originalEvent.dataTransfer.setData("Text", e.target.id);
  });

  $("#div1").on("drop", function(e) {
    e.preventDefault();

    var data = e.originalEvent.dataTransfer.getData("Text");
    data === 'drag1' && $(this).append(drag1);
  });

  $("#div2").on("drop", function(e) {
    e.preventDefault();

    var data = e.originalEvent.dataTransfer.getData("Text");
    data === 'drag1' && $(this).append(drag1);
  });
});

css

  #div1 {
     min-width: 350px;
     min-height: 70px;
     padding: 40px;
     border: 1px solid #aaaaaa;
   }

   #div2 {
     width: 350px;
     min-height: 70px;
     padding: 10px;
     border: 1px solid #aaaaaa;
     background: red;
   }

jsfiddle Example

If I want to drag on child it should drop only on that container but on parent container I don't know how to stop the drag event.

Thanks for your help.

Answer 1

Here is your solution: http://jsfiddle.net/43xky7ot/

1.) it's not propogation rather it is propagation e.stopPropagation()

2.) you need to stop bubbling when dropping in div2: $("#div2").on("drop", function(e) {e.stopPropagation();})

$(document).ready(function() {
  var drag1 = `<img src="http://www.w3schools.com/html/img_logo.gif"  width="336" height="69">`

  $("#div1").on("dragover", function(e) {
    $(this).css('background', 'yellow');

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

  $("#div1").on("dragleave", function(e) {
    $(this).css('background', 'none');

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

  $("#div2").on("dragover", function(e) {
    $(this).css('background', 'yellow');

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

  $("#div2").on("dragleave", function(e) {
    $(this).css('background', 'red');

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

  $("#drag1").on("dragstart", function(e) {
    e.originalEvent.dataTransfer.setData("Text", e.target.id);
  });

  $("#div1").on("drop", function(e) {
    e.preventDefault();

    var data = e.originalEvent.dataTransfer.getData("Text");

    data === 'drag1' && $(this).append(drag1);
  });

  $("#div2").on("drop", function(e) {
    e.preventDefault();
    e.stopPropagation();
    console.log('div2 dropped');

    var data = e.originalEvent.dataTransfer.getData("Text");

    data === 'drag1' && $(this).append(drag1);
  });
});