Html 5 嵌套拖放使用 jQuery

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

Html 5 嵌套拖放使用 jQuery

Html 5 nested drag and drop using jQuery

html

javascript

jquery

drag-and-drop