We Keep Coding

When dragging onto a table, how do you tell which row got dropped onto?

I am hoping to use the 'Draggable' and 'Droppable' functions of jQuery-UI to drag data from one table into another.
I am hoping to be able to keep track of which cell gets dragged into (specifically, an X/Y index), and though the This object that the droppable function returns lists a CellIndex, which contains the Column (X) value, I've had less luck finding which row it got dropped onto (the Y).
How can I tell what row I just dropped on?
JS Fiddle Link

I would do the following:
use drop event
find the dropped object by using $(this) or event.target
find the .closest() table row(tr)
compare it to the table's rows by using .index()
$('#mappingChar td').droppable({
hoverClass: "ui-state-hover",
drop: function (event, ui) {
var dropped = $(this),
droppedRow = dropped.closest('tr');
console.log(droppedRow.index());
}
});
DEMO:
http://jsfiddle.net/dirtyd77/XcKdX/3/
Hope this helps and let me know if you have any questions!

you could use .index() or rowIndex to find that out, something like this in your code should do it:
$('#mappingChar td').droppable(
{
hoverClass: "ui-state-hover",
drop: function( event, ui )
{
alert($(this).parent().index()+"\nor\n"+$(this)[0].parentNode.rowIndex);
console.log('drop successful');
}
});

jQuery UI draggable: Access dragged element when using helper: clone

I have a set of jquery UI draggables that are connected to a sortable via helper: 'clone'. In the receive event of the draggable I want to access the element that just got put into the list, but there does not seem to be any way of doing this.
My code is similar to this:
$('#drag li').draggable({
helper: 'clone',
revert: 'invalid',
connectToSortable: '#sort'
});
$('#sort').sortable({
receive: function(evt, ui) {
ui.item.css('color', 'green');
ui.helper.css('color', 'green');
}
});
ui.item refers to the original draggable, pre-clone, while ui.helper seems to not exist anywhere in the document after the item has been dropped.
See this jsfiddle for an example: http://jsfiddle.net/KSuPX/
Update: Sorry if my actual question is a bit unclear. A summary:
When the sortable list receives a new element, how do I access that element?

Sortable and draggable are 2 different widgets and maybe you would need edit the .js file if no solution works. And unfortunately jQuery UI does not provide detailed examples on how these functions work. You could try using the option 'sender' under receive as mentioned here - http://api.jqueryui.com/sortable/#event-receive

Add a parameter to a div within a droppable

I'm trying to add a parameter to a div once its dropped onto a droppable.
Is there a method which resembles addParameter below which can add the paramter ?
$( ".placeHolder" ).droppable({ drop: function( event, ui )
{
"#"+this.id.addParameter(myParam="testParam");
}

Use the .attr() function. To set the attribute use
$(this).attr('my_attribute', 'my_value');
and to get it use
$(this).attr('my_attribute');

If you mean setting the attribute to the draggable element, then you can use:
$(".placeHolder").droppable({
drop: function(event, ui) {
ui.draggable.attr("myParam", "testParam");
}
});
Otherwise, just use ui.draggable as a jQuery object of the draggable element.

When cloning a draggable object in jQuery UI, how can you transfer the data and events to the new element?

I have a draggable element with the helper: 'clone' set, but when it clones the element, none of the data() or events are persistent in the new element.
I've tried a number of ways to reattach the data(), but I can't seem to select the new element as well as the old element in the same statement.
For instance, I can select the initial element in the draggable stop() event:
$blah.draggable({
helper: 'clone',
stop: function(ev, ui) {
var oldData = $(ev.target).data('blah');
}
});
And I can also get the new element in the droppable drop() event:
$blah.droppable({
drop : function(ev, ui) {
var $newElement = ui.draggable;
}
});
But I can't figure out a way to get both in the same event.
What I'd like to do is somehow transfer the data, e.g.:
$newElement.data('blah', $oldElement.data('blah'));
Or otherwise make the data persistent, like you can with $blah.clone(true);

To get access to the data of original element in drop you can use ui.draggable.context. In the example below context would refer to the original dragged element and you have access to all of its content. Draggable refers to the new element that is being dropped.
$("#droppable").droppable({
drop: function(ev, ui) {
console.log(ui);
console.log(ui.draggable.context);
console.log($(ui.draggable.context).data('pic'));
}
});

I haven't worked too extensively with droppable, but couldn't you just do something like this?
$(".draggable").draggable({
helper: 'clone'
});
$("#droppable").droppable({
drop: function(ev, ui) {
$(this).append(ui.draggable.clone(true));
}
});
Seems to work unless there's something I'm missing:
http://jsfiddle.net/hasrq/

Turns out the problem was sortable, not draggable / droppable (I was attaching sortable later on, but figured it wasn't part of the problem here so I left it out of the original question).
I ended up using sort of a combination of #kingjiv's solution above, along with a not-the-greatest hack but at least it seems to be working:
$blah.sortable({
receive: function(ev, ui) {
// setting a global variable here
MyGlobals.cloneCache = ui.item.clone(true);
},
stop: function(ev, ui) {
$(ui.item).replaceWith(MyGlobals.cloneCache);
}
});
The idea is that you first clone the original item in the receive() event, cache this in a variable, and then replace the item with that in the stop() event.
Kind of ugly but at least it's working.

ui.item refers to dragged item. When the dragged item is cloned, there is no built-in way to access the target item from receive function. However, there is a bit hacky way how to do it:
$blah.sortable({
receive: function (ev, ui) {
var $target = $(this).data().sortable.currentItem;
var $source = $(ui.sender);
// now you can copy data from source to target
$target.data('data-item', $source.data('data-item'));
}
});

Editing draggable after it's added to a sortable

Hey, I'm trying to work out what event I need to bind to and what property I need to use to get a reference to the DOM element for the dropped item (That is the item in the receiving list.
Here's what I have so far...
<ul id="toolbox">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<ul id="existing">
</ul>
<script language="javascript">
$('#existing').sortable({
revert: true
});
$('#toolbox li').draggable({
connectToSortable: '#existing',
helper: 'clone',
revert: 'invalid',
});
</script>
My objective is to turn, for example, A into something else once it's dropped into the #existing ul (Anything else will suffice - the real implementation is far more complex. I just need to get my hands on that DOM element).
I have tried the following as the receive for my sortable:
function receive(ev, ui)
{
$(this).append('<b>this</b>');
ui.sender.append('<b>sender</b>');
ui.item.append('<b>item</b>');
}
But this appears to be the #existing UL, sender and item are both the li that was dragged in toolbox. What I'm looking for is the newly created li inside #existing. Is there a property or another event which will give me what I'm after?

I recently had the same issue. I solved it with the following:
$('#existing').droppable({
drop: function(e, ui) {
// ui.draggable is the node that gets created in #existing
// ui.draggable[0].originDragger is the node that was
// dragged from #toolbox
}
}).sortable({
revert: true
});

I haven't tried either of these, but in theory, they seem like they would work. First, if you made the ul#existing also a droppable, you could do something on the drop event, such as get the info you need from that li, like it's text(), remove that object from the DOM and generate a new element.
Orrr, you could do something on the stop event of your draggable, like check whether the elements parents are now ul#existing. Hope this helps.

do not bind to sortreceive, instead bind to sortout like so
$("#sortable").bind('sortout', function(event, ui) {
console.log(ui.item);
});
OR
$("#sortable").sortable({ //during initialization
out:function(event, ui) {
console.log(ui.item);
}
});
in this case ui.item will be the element you are looking for