jQuery UI Multiple Droppable - drag whole div element & clone

Question

I've just started using jQuery UI to drag divs into a columns in a table. I have a couple different draggable divs with different background-colors and text inside them, and I need them to be able to dragged up to the drop area as a clone. This worked fine by using jQuery UI's example shopping cart code, but I've edited it so the whole object is dragged instead of just the text, but this then eliminates the clone functionality for some reason, even though I have helper:clone.

Here is my code:

<script>
$(function() {
    $( "ul li" ).draggable({
        appendTo: "body",
        helper: "clone"});
    $( ".day #drag" ).draggable({
        appendTo: "body"});
    $( ".day" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            var targetElem = $(this).attr("id");

            $( this ).addClass( "ui-state-highlight" );
            $( ui.draggable ).appendTo( this );
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $( this ).removeClass( "ui-state-default" );
        }
    });
});
</script>

Example column:

<td>
   <div id="monday" class="day monday ui-widget-content"></div>
</td>

Draggable element:

<li><div style="background-color:#<?=$bgColor?>;color:<?=$textColor?>;" id="drag" class="<?=$subject?>"><?=$row['name']?></div></li>

It's essentially a timetable setup tool. Thank you for the help

Here is a jsFiddle for reference: http://jsfiddle.net/x5T4h/

Answer 1

Not sure that it is exactly what you want, but here is a good start for your : http://jsfiddle.net/x5T4h/2/

Basically, I removed the second draggable object declaration, and I added clone function to duplicate your element inside drop event $( ui.draggable ).clone().appendTo( this );

$(function() {
    $( "ul li" ).each(function(){
        $(this).draggable({
            helper: "clone"
        });
    });

    $( ".day" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            var targetElem = $(this).attr("id");
            $( ui.draggable ).clone().appendTo( this );
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $( this ).removeClass( "ui-state-default" );
        }
    });
});​