How do I control the style of the clone of a draggable div when moved to a sortable container?

Question

What I'm trying to do is combine two projects:

• One is an example of draggable and sortable list-items
• The other is jEditable, which I'm using to make the list-items editable

Now I was able to append the edit class to the existing list items in the first link without any trouble. When I go to create a new draggable item (a clone) and move it to the sortable list, I want it to take on the css class of the older items. I have tried adding code to the draggable's stop event and the sortable's receive event with no luck. It's the original's style that changes, not the clone's.

                receive: function(event, ui) {
                alert("dropped item ID: " + ui.item.attr('id'));
                $("#draggable").attr('class', 'edit');
                }

stop: function() {
                    if ( !$( "#draggable" ).hasClass( "ui-state-hover" ) ) {
                        $( "#draggable" ).removeClass( "ui-state-highlight" );
                        $( "#draggable" ).addClass( "ui-state-default" );
                        $( "#draggable" ).addClass( "edit" );
                    }
                }

How can I achieve this?

JSFiddle is here

Answer 1

You can actually utilize the ui in your sortable event stop. Here short definition of them:

ui.
helper: The jQuery object representing the helper being sorted
item: The jQuery object representing the current dragged element
offset: The current absolute position of the helper represented as { top, left }
position: The current position of the helper represented as { top, left }
originalPosition: The original position of the element represented as { top, left }
sender: The sortable that the item comes from if moving from one sortable to another

So you need to use stop event and change the ui.item style like this:

$(ui.item).attr('class', 'ui-state-default edit');

And you have to re-initiate the editable like this:

$(document).ready(function() {
    initEditable();
});

function initEditable(){
    $('.edit').editable('http://www.example.com/save.php', {
        indicator : 'Saving...',
        tooltip   : 'Click to edit...'
    });
    $('.edit_area').editable('http://www.example.com/save.php', { 
        type      : 'textarea',
        cancel    : 'Cancel',
        submit    : 'OK',
        indicator : '<img src="img/indicator.gif">',
        tooltip   : 'Click to edit...'
    });
}


$(function() {
    $( "#sortable" ).sortable({
        revert: true,
        update: function() {
            var orders = [];
            $.each($(this).children(), function(i, item) {
                orders.push($(item).data("x"));
            });
            $("#info").text("Order: " + orders.join(","));
        },
        stop: function(event, ui) {
            $(ui.item).attr('class', 'ui-state-default edit');
            initEditable();
        }
    });
});

See modified code here: http://jsfiddle.net/xvsMh/1/