jQuery DnD. How to pass data associated with an element being dragged?

Question

There is a list / a table of items (I believe it doesn't matter now). They are made draggable with use of jQuery. I need to set some data associated with an item element being dragged and to be able to extract it from event in "drop" handler of droppable element.

I was trying to use dataTransfer property with its setData() function but the property is not available on both sides.

Here is simplefied example: http://jsfiddle.net/x52ue9ae/1/

Answer 1

The problem is that this is not HTML5 drag-n-drop, jQueryUI implements pure javascript drag and drop using mousedown/mousemove/mouseup events. There are no dataTransfer mechanism involved at all.

Instead you should set data property using jQuery to the drag-element:

$(function(){
    $(".draggable").draggable({
        start: function(e) {
            $(this).data('id', 3);
        }
    });
    $(".droppable").droppable({
        drop: function(e, ui) {
            var id = ui.draggable.data('id');
            console.log(id);
        }
    })
});

Demo: http://jsfiddle.net/x52ue9ae/2/