jQuery - manipulate dropped element in sortable list

Question

I have a draggable list (.field) where you can drag & drop items from it into a sortable list (.sortlist). I did it this way because I didn't want the master list (.field) altered in any way. It works fine, except I cannot work out how to manipulate the dropped field in a sortable list. I can do it from a draggable into a droppable area by using the following in a function for 'drop:' in droppable(): ``` $(this).append('html code here to change content of dragged field'); ``` However this doesn't work inside a sortable(). My code looks like this: ``` $(".sortlist").sortable({ receive: function(event, ui) { var dropElemTxt = $(ui.item).text(); var dropElemId = $(ui.item).attr('id'); $(ui.item).replaceWith('

Updated field! '+dropElemTxt+'

'); } }); ``` $(ui.item).replaceWith changes the master field that was being dragged, so this doesn't work. And I tried $(this).replaceWith, but that updates the sortable area (.sortlist). Any idea what code I nee…

Accepted Answer

You could get the dragged item in beforeStop event:

```
beforeStop: function (event, ui) { draggedItem = ui.item;},
receive: function (event, ui) { /* use draggedItem here*/ }
```

Using beforeStop event instead of receive was enough for me:

```
beforeStop: function(event, ui) { 
        var myClassItem = $('.myClass', ui.item);
        myClassItem.bind('click', function(){ /*my function*/ });
    }
```

jQuery - manipulate dropped element in sortable list

Solution

Problem