JQUERY getting id of SORTABLE item that is dropped in DROPPABLE

Question

I have sortable table elements. I want to be able to take an item from the list into a trash (droppable) div.

I can get the id's of connected sortable's or drag/drop list. But combining a sortable with a droppable has got me stumped.

$("#trash").droppable({
accept: "tr.sortable-row",
hoverClass: "ui-state-hover",
drop: function(ev, ui) {

    var draggableId = $("tr.sortable-row").attr("id");
    var droppableId = $(this).attr("id");


    alert("Draggable ID: "+ draggableId+" Droppable ID: "+droppableId);
    ui.draggable.remove();
    $("#trash").html("<div><span><img style='height:100px; width:100px;'  src='/sis/images/trash.png' ></div>");
    var clickSound = new Audio('/sis/includes/trash.mp3');
    clickSound.play();

}});

draggableId is UNDEFINED

droppableId is the id of the trash droppable div.

How do I get the ID of the .sortable-row tr???

Answer 1

See those arguments to the drop function? (ev, ui)? The second one is a set of handlers to the UI for the draggable item, including the drag item itself. That's under ui.helper

If you used original or clone as an argument to the drag feature, then the original ID should still be there. (I actually like to use the about attribute myself to store IDs that may not be unique-- parts of a display may be distributed across a page, and using the typeof / about / property HTML5 attributes lets me understand what objects I have on a page). If you provided a function for a custom representation, it's your responsibility to provide the ID (in either the aformentioned about attribute, or in an HTML data attribute) to be read on drop.