jQuery: Pass data from draggable to droppable (jQueryUI)

May 8th, 2009 by jeremychone

jQuery has a neat and efficient way to attach data to DOM elements ($.fn.data). You can use it to pass data from your draggable to your droppable.

First you attach the data to the draggable UI element:

$(".document").draggable({
  helper: 'clone',
  revert: 'invalid'
}).data("myData","secret data");

Then, you get it back on drop:

$(".folder").droppable({
   accept: ".document",
   hoverClass: "drophover",
   tolerance: "touch",
   drop: function(event, ui){
           alert($(ui.draggable).data("myData"));
   }
});
See also: jQuery UI Drop API

One Response to “jQuery: Pass data from draggable to droppable (jQueryUI)”

  1. Martin Says:

    Nice. just what I needed

Leave a Reply