CODEWITHSUNDEEP
jqueryjquery-ui
Wiram Rathod
Wiram Rathod

Reputation: 1919

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

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>

Upvotes: 5

Views: 7394

Answers (1)

Irvin Dominin
Irvin Dominin

Reputation: 30993

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/

Upvotes: 4

Related Questions