删除后如何添加和删除对象类？

Question

我正在运行以下html ：

<div class="container">
  <div class="row">
    <div class="col">
      <div class="row">
        <div class="col">
          <div id="container1">
            <div class="resizeDiv col-6"></div>
            <div class="resizeDiv col-6"></div>
          </div>
        </div>
        <div class="col">
          <div id="container2"></div>
        </div>
      </div>
    </div>
  </div>
</div>

这是JS

var currentParent;  
$(".resizeDiv").draggable({
  revert: 'invalid',
  containment: "#container2",
  start: function(){
    currentParent = $(this).parent().attr('id');
  }
}); 
$('#container1, #container2').droppable({
  accept:'.resizeDiv',
  drop: function(event,ui) {
    if (currentParent != $(this).attr('id')) {
      $(ui.draggable).appendTo($(this)).removeAttr('style');
    }
    $(this).find("div").on("click", function(){
      if($(this).hasClass("col-6")) {
        $(this).removeClass("col-6").addClass("col"); 
      } else { 
        $(this).removeClass("col").addClass("col-6");
      }
    });
  }
});

当我drop一个元素，我click它，它的class从变化col-6至col ，但是当我drop第二个项目中， toggle classes的click只能在第二添加的项目，而不是第一个被添加。

这是一个Codepen ，尝试将一个项目添加到第二个容器中并单击它，然后放下第二个项目并尝试单击它们。

注意

理想情况下，我希望不点击即可自动调整大小

Answer 1

你的问题是这个

$(this).find("div").on("click", function(){
  if($(this).hasClass("col-6")) {
    $(this).removeClass("col-6").addClass("col"); 
  } else { 
    $(this).removeClass("col").addClass("col-6");
  }
});

这样做是每次您删除元素时，该元素将通过该容器中的所有div。 这意味着您已经在其上设置了单击处理程序，因此，当您放置第二个项目时，第一个div将获得第二个单击处理程序。 如果您丢掉三分之一，它将得到三分之一，依此类推。

因此，当您单击第一个回调时，实际上是触发了其中两个回调，并且该类在第一个中添加，在第二个中删除。

由于ui.draggable引用了拖动的元素，因此使用该元素作为添加点击处理程序的参考

$(ui.draggable).on("click",function(){
  let $this = $(this);
  if($this.hasClass("col-6")) {
    $this.removeClass("col-6").addClass("col"); 
  } else { 
    $this.removeClass("col").addClass("col-6");
  }
  //note instead of doing the if else and removeClass().addClass() 
  //calls you could just do toggleClass('col-6 col')
  //it will toggle one off and the other on
  $this.toggleClass('col-6 col');
});

如果相反，您想摆脱单击处理程序，而只想直接添加类，则在ui.draggable上进行ui.draggable

$this = $(this); 
$draggable = $(ui.draggable);
if (currentParent != $this.attr('id')) {
  $draggable.appendTo($this).removeAttr('style').toggleClass('col-6 col');
}

另请注意，我正在存储jQuery对象。 如果要多次使用$(this)或$(ui.draggable)东西，最好将其存储在变量中并使用它，而不是多次调用jQuery()

Answer 2

我发现的解决方案是使用：

e.stopImmediatePropagation();

链接到文档

最终的JS代码

var currentParent;  
$(".resizeDiv").draggable({
  revert: 'invalid',
  containment: "#container2",
  start: function(){
    currentParent = $(this).parent().attr('id');
  }
}); 
$('#container1, #container2').droppable({
  accept:'.resizeDiv',
  drop: function(event,ui) {
    if (currentParent != $(this).attr('id')) {
      $(ui.draggable).appendTo($(this)).removeAttr('style');
    }
    $(this).find("div").on("click", function(e){
      e.stopImmediatePropagation();
      if($(this).hasClass("col-6")) {
        $(this).css("background-color", "red");
        $(this).removeClass("col-6").addClass("col"); 
      } else {
        $(this).css("background-color", "yellow");
        $(this).removeClass("col").addClass("col-6");
      }
    });
  }
});

注意

但是，如果el紧挨另一个dropped ，我仍在尝试auto size 。