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('<li class="box" id="'+dropElemId+'">Updated field! '+dropElemTxt+'</li>');
}
});
$(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 need to reference the dragged item?
Many thanks, Ali.
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*/ });
}
I think I've worked it out. A bit hacky, but seems to work!
I need to use $('.sortlist li:last') to access the dragged element...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With