Как удалить перетаскиваемый элемент, только если он имеет определенный класс?

Question

Я хочу удалить перетаскиваемый элемент, но его нужно удалить только в том случае, если у него нет класса «nodrop».

вот мой текущий код удаляет все элементы Wheter я включил функцию, если:

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

у меня нет никакого плана, что я сделал неправильно ...

Answer 1

Вы ток (.löschen) с $(this). С $(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>