javascript - 使用 jQuery 的 Html 5 嵌套拖放

Question

您好，我已经使用 html5 拖放创建了一些演示。我有嵌套的可拖动容器。当我尝试在子容器上拖动元素时，它会将元素附加到两个容器上。我该如何修复该部分？请帮助我。

这是我的例子`

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

如果我想拖动子容器，它应该只放在该容器上，但在父容器上我不知道如何停止拖动事件。

感谢您的帮助。

Answer 1

这是您的解决方案: http://jsfiddle.net/43xky7ot/

1.) 这不是传播，而是传播e.stopPropagation()

2.) 放入 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);
  });
});