Draggable/Droppable get data/attr from original element when using clone

Question

I'm using jQueryUI draggable/droppable to drag rows from one table to another. I am using helper: 'clone' and having a hard time getting any of the data/attributes from the original item that is being dragged. Here is a jsfiddle to better illustrate:

https://jsfiddle.net/e2ter0a4/8/

I am trying to get the data-id attribute from the table cell when it is dropped in the droppable area and am unable to do so...

NOTE: I am trying to do this through jQueryUI, without having to keep track of the last clicked cell before the drag starts or some other custom solution (I already have a similar workaround implemented just wondering if there was an easier/cleaner solution).

Answer 1

You can use the ui parameter to get it. ui.draggable gets the element you are dragging. From the documentation:

draggable
Type: jQuery
A jQuery object representing the draggable element.

Try this:

$("#droppable").droppable({
    drop: function(event,ui){
    //get data-id from original td
    console.log(ui.draggable[0].getAttribute("data-id"));
  }
});

JQuery UI Droppable documentation

Here is a fiddle