jquery UI sortable: how can I change the appearance of the "placeholder" object?

Looking at the source for ui.sortable.js (1.7.2), you can cheat and set the placeholder to an object with a element function and an update function. The element function is used to return the placeholder dom object and the update function allows you to do things like correct its size (you can check out the _createPlaceholder function inside sortable if you want to see what the default implementation does).

So for example, the following will create a list item with the word test inside as your placeholder (note that it returns the actual dom object ([0]) and not the jQuery object itself):

$("#sortable").sortable({    placeholder: {        element: function(currentItem) {            return $("<li><em>test</em></li>")[0];        },        update: function(container, p) {            return;        }    }});

If I'm reading source correctly, the element function should be passed the current item (jQuery object) and this should point to the sortable itself (i.e. $("#sortable") in this instance). In update you're passed the "container" which is the object which holds all the options, & the element, etc & the placeholder itself.

Please note that this is an undocumented hack, so it would obviously be unsupported & may change with the next version of jQuery UI... but it still may be of use to you, given you were talking about editing ui.sortable.js directly anyway.

Hope that helps.

A more hackish approach that I found: one can use the start option to modify the placeholder element, e.g. as follows

$("#sortable").sortable({    start: function (e, ui) {       // modify ui.placeholder however you like      ui.placeholder.html("I'm modifying the placeholder element!");    }});