jquery droppable two return value

Question

I have two images. The photo-1 partly covering the photo-2:
2 photos

I can drop a new image on the photo-1 with jQuery draggable-droppable. The problem is: if I drop the new photo on the photo-1, I get back two values sequentially. (first: photo-1 id, second: photo-2 id)

Here is the code:

$("#dropbox span").droppable({
    drop: function( event, ui ){
        var droppableId = $(this).attr("id");
        console.log(droppableId);
    });
});

<div id="dropbox">
<span id="first"></span>
<span id="second" ></span>
</div>

How could I get back just the first id?

Thanks in advance!

Answer 1

I could solve the problem in two ways:

1. with a js: vaceta / jquery-top-droppable

2. with a stackoverflow post, but here I need to modify the 'over' section: droppable({ disabled: true })

Thanks everyone for the help.