Question

I have 3 columns.

<div id="catalog">
    <ul id="author">
        <li>Different Author names</li>
        ....
    </ul>
    <ul id="genre">
       <li>Different Genres</li>
    </ul>
    <ul id="publish">
       <li>Different Publishers<li>
    </ul>
</div>

I use jquery to drag and drop the items from these list to different list cart like this

    $(function() {
        $( "#catalog li" ).draggable({
            appendTo: "body",
            helper: function( event ) {
                    return $( "<li class='bit-box'>" + $(this).text() + "</li>" );
            },
      cursorAt: { cursor: "move", top: 5, left: 5 }
        });
        $( "#cart ul" ).droppable({
            accept: ":not(.ui-sortable-helper)",
            drop: function( event, ui ) {
                $( this ).find( ".placeholder" ).remove();
        $( this ).find( "li:contains('" + ui.draggable.text()  + "')" ).remove();
                $( "<li class='bit-box'></li>" ).text(ui.draggable.text()).append("<a class='closebutton' href='#' onclick='$(this).parent().remove();'></a>").appendTo( this );
            }
        });

Is there any any way to figure out which list the are dropped item belongs to.

I appreciate any help.

Answer 1

Try using this in the drop handler:

ui.draggable.closest('ul').attr('id')

It should give you an id of the list that dropped item belongs to.