Javascript 使用jQuery进行HTML5嵌套拖放

您好，我已经创建了一些html5拖放演示。我有嵌套的可拖动容器。当我试图拖动子容器上的元素时，它会在两个容器上追加元素。我怎样才能修理那部分？请帮帮我

这是我的例子`

html

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

感谢您的帮助。

以下是您的解决方案：

1.）它不是传播，而是传播

2.）在放入div2时需要停止冒泡：

$（“#div2”）。在（“drop”上，函数（e）{e.stopPropagation（）；}）

$（文档）.ready（函数（）{
变量drag1=``
$（“#div1”）。关于（“dragover”，函数（e）{
$（this.css（'background'，'yellow'）；
e、 预防默认值（）；
e、 停止传播（）；
});
$（“#div1”）。关于（“dragleave”，函数（e）{
$（this.css（'background'，'none'）；
e、 预防默认值（）；
e、 停止传播（）；
});
美元（“#div2”）。关于（“dragover”，函数（e）{
$（this.css（'background'，'yellow'）；
e、 预防默认值（）；
e、 停止传播（）；
});
$（“#div2”）。关于（“dragleave”，函数（e）{
$（this.css（'background'，'red'）；
e、 预防默认值（）；
e、 停止传播（）；
});
$（“#drag1”）。关于（“dragstart”，函数（e）{
e、 originalEvent.dataTransfer.setData（“Text”，即target.id）；
});
$（“#div1”）。在（“drop”上，函数（e）{
e、 预防默认值（）；
var data=e.originalEvent.dataTransfer.getData（“文本”）；
数据=='drag1'&&$（此）.append（drag1）；
});
$（“#div2”）。在（“drop”上，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
log（'div2已删除'）；
var data=e.originalEvent.dataTransfer.getData（“文本”）；
数据=='drag1'&&$（此）.append（drag1）；
});
});

<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">

  $(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);
  });
});

  #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;
   }

$(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);
  });
});