jQuery UI, how to get element id where drop the element?

Question

my code is below:

when I drop li items in content div's span element, at time I want get span tag's id how it possible?

jsfiddle link

<ul class="secd_line_icon" id="secd_line_icon" >
    <li id="products">
        <img id="productid_1" class="product" src="https://si0.twimg.com/profile_images/1888289249/heart_sm_normal.jpg" />
    </li>
</ul>


<ul id="bookmark_icon" class="droppable" style="height: 100px;">

</ul>

<div id="content" >
    <span id="s1">I have two hearts 
Heart is pulsating with blood <span>

<span id="s2"> And heart is pulsating with love 
        </span>
</div>

<script>
    $("#content").droppable({
        accept: '#secd_line_icon li',
        drop: function(event, ui) {

            $("#bookmark_icon").append($(ui.draggable).clone());
            $("#content_area .product").addClass("item");
            $(".item").removeClass("ui-draggable product");
            $(".item").draggable({
                containment: 'parent',
                grid: [150,150]
            });
        }
    });
    $("#secd_line_icon li").draggable({
        helper: 'clone'
    });

</script>

Answer 1

You can check the element that receive the drop by checking event.target in the drop event.

The event and ui parameters contain some information about the drag and drop elements.

You can get the id of the element that receive the drop with: $(event.target).attr('id')

Here is a working fiddle: http://jsfiddle.net/IrvinDominin/Pf4P9/1/