Detect mouseup на конкретном div jquery

Question

У меня есть два div: 1 div с перетаскиваемыми/отбрасываемыми элементами и 1 div, который показывает элементы. Я хотел бы открыть всплывающее окно, и элемент перетаскивается во второй div. Вот HTML:

<div class="elements"> 
    <div class="drag"> 
    </div> 
    <div class="drag"> 
    </div> 
    <div class="drag"> 
    </div> 
    <div class="drag"> 
    </div> 
</div> 
<div class="container"> 

</div> 

$('.drag').draggable().resizable(); 

$('.drag').mouseup(function(e) { 
    var zone = $(".container"); 
    var target = $(e.target); 
    if (target.is(zone)){ 
    alert("test"); 
    }  
}); 

И JSfiddle

Я не в состоянии обнаружить зону на самом деле. Благодарю.

Answer 1

как @Ronen Отдается вы должны прочитать документацию, Вы должны иметь Droppable событие вместо MouseUp:

$('.drag').draggable().resizable(); 
$(".container").droppable({ 
     classes: { 
     "ui-droppable-hover": "ui-state-hover" 
     }, 
     drop: function(event, ui) { 
     alert("test"); 
     } 
    }); 

Answer 2

может быть что-то вроде этого:

$('.drag').draggable().resizable(); 
$(".container").droppable({ 
    accept: ".drag", 
    classes: { 
    "ui-droppable-active": "ui-state-default" 
    }, 
    drop: function(event, ui) { 
    alert("test"); 
    } 
});