views:

526

answers:

1

I've read through many of the drag and drop threads on SO and i haven't found one that tells me how to get the child element id of the dragged element, when the dragged element is dropped.

For example if you have

<div id='drag'>
  <img id="something"/>//how do i get this id when #drag is dropped?
</div>

<div id='drop'>
</div>

and the js

$('#drag').draggable({
  containment: '#content',
  scrollSensitivity: 60,
  revert: 'invalid',
  cursor: 'move'
});

$('#drop').droppable({
  accept: '#albumImgs li',
  activeClass: 'dropContainerOpen',
  drop: function(event, ui) {
    var fileName = $(ui.draggable.attr('alt'));
    console.log(fileName);
  }
});
+1  A: 

ui.draggable is the dragged element you just need to do a query for the child you want:

$('#drop').droppable({
  accept: '#albumImgs li',
  activeClass: 'dropContainerOpen',
  drop: function(event, ui) {
    var fileName = $(ui.draggable.attr('alt'));
    console.log(ui.draggable.find('#something'))
    console.log(fileName);
  }
});
PetersenDidIt
where does this ui.draggable come from? It's not a class or id or anything. Can you point me in the direction of some documentation?
Catfish
Don't know if its documented very well, just something you find when you start digging in to the frameworks you are using.
PetersenDidIt