javascript - 仅当拖动的元素具有特定类时，如何删除它？

Question

我想删除一个拖动的元素，但只有当它不具有“nodrop”类时才应删除它。

这是我当前的代码，它删除了所有元素，无论我是否包含 if 函数:

    $(".löschen").droppable({
    drop: function(event, ui) {
    if (!$(this).hasClass("nodrop")){
    ui.draggable.remove();
    findTotal();
    }
    }});

我没有任何计划我做错了什么......

Answer 1

您可以使用 $(this) 获取当前放置容器 (.löschen)。使用 $(ui.draggable) 你可以得到类 nodrop 的拖放元素。

$(".draggable").draggable();

$(".löschen").droppable({
  drop: function(event, ui) {
    var $dropContainer = $(this);
    var $dragContainer = $(ui.draggable)
    console.log($dropContainer, $dragContainer);
    if (!$dragContainer.hasClass("nodrop")){
      $dragContainer.remove();
    }
}});

.draggable {
  width: 100px;
  height: 100px;
}

.drop {
  background-color: green;
}

.nodrop {
  background-color: red;
}

.löschen {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div class="draggable nodrop">NO DROP</div>
<div class="draggable drop">DROP</div>

<div class="löschen">TRASH</div>