clone of dragged element and place it in dragged div area using sortable jqueryui

Question

I am trying to clone the dragged element and put it in the area where the dragged element was present with 0.2 opacity. for some reason its not working perfectly.place holder can move and show the place where to drop the element but the area from where the element was dragged should show the clone with reduced opacity till the element is dropped.

js fiddle:

http://jsfiddle.net/Fj7eN/

html:

<div id="sortable">
    <div class="one sortableElems">Div 1</div>
    <div class="two sortableElems">Div 2</div>
    <div class="three sortableElems">Div 3</div>
</div>

jquery:

$(function() {      
    $("#sortable").sortable({
        opacity: 0.8,
        cursor:"-webkit-grab",
        placeholder: {
            element: function(item, ui) {
                return item.clone().css({
                    "opacity":"0.2", 
                    "position":"relative"
                });
            },
            update: function() {
                return;
            }
        }
    });
});

Answer 1

Found the answer myself:

js fiddle:

http://jsfiddle.net/Fj7eN/5/

jquery:

$(function() {  
    $("#sortable").sortable({
        opacity: 0.8,
        cursor:"-webkit-grab",
        start:function(e,ui){
            $(ui.item[0]).css({"display":"block","opacity":"0.2"});
        },
        helper:"clone",
        placeholder: "placeholder",
        update:function(e,ui){
           $(ui.item[0]).css({"opacity":"1"});
        }
    });
});