jquery - Colour should change of first div 'li' element after drag and drop to another div li

Question

When I drag and drop elements li of first div to another div i.e "Add your Stories here" box then contents gets dropped. However what I need that the colour of dragged element should change as it has been dropped to div 2 i.e id = dialogIteration.So that I may know which elements have been dragged and dropped and which are left to be dragged. Here is my running code to drag and drop.

[http://jsfiddle.net/coolanuj/7683X/25/]

Answer 1

Select the srcElement of the event in your drop function, and then go from there.

drop: function(event, ui) {
    $(event.srcElement).css('color', 'green');
    $(this).find(".placeholder").remove();
    $("<li></li>").text(ui.draggable.text()).appendTo(this);
}
​

Answer 2

How do you make your li draggable? via jQuery UI? if so, you can use the event stop( event, ui )

it's Triggered when dragging stops.

You can call an eventhandler on stop().

jQuery:

$('body').on('stop','#dialogIteration',function(){

// highlight your dragged <li> item
$(this).toggleClass('highlight',true);

});

CSS:

.highlight{
background-color: yellow;
}