2
votes

EDIT: I Trimmed this question down, and put it on

See how it's the original and not the new item that gets altered http://jsfiddle.net/mikkelbreum/DBG5q

See how the dragged helper gets altered, but the element reverts back once it's dropped. http://jsfiddle.net/mikkelbreum/dpTC8

I've got a draggable list linked to a sortable list

When I drag from draggable to sortable I use a cloned helper, so the original is still left in draggable collection.

each time I drag a clone from the draggable list to the sortable list, I want to give the new copy a unique headline (manipulate it's h2 element).

I can't find a way to address the newly created element.

I've tried two approaches:

One is to target the helper clone at the start event in the draggable. The problem here is, that although the helper clone does get changed, that change it is not copied over to the final element when it is created in the sortable list. The new element created there takes the value of the original in the draggable list of which it is a clone.

start: function(event, ui) {

ui.helper.find('h2').text('altered');

}

I can se the changes to altered on the clone when I start dragging, but when it is dropped on the sortable, the h2 is reset to the original heading.

So now I've tried a secondary approach where I instead try to alter the new original in the receive event of the sortable:

receive: function(event, ui) {

ui.item.find('h2').text('altered');

}

This alters the h2 of the original element over in the list I dragged the element from, but the new element that is created inside sortable is still as the old original..

How do I get to target/alter it?

1

1 Answers