JQuery Sortable - Add Placeholder Text

Question

I am trying to add text to a placeholder field that appears when dragging a sorted item. is there a function in jQuery UI that I don't see? Now I am trying to execute .append () information, but it does not work. Can anyone help? Here's the jQuery function ...

//Sortable Function - Edit Wizard $(function () { //add text to placeholder box if ($('.ui-state-highlight').is(':visible')) { $('.ui-state-highlight').append('<span>MOVE HERE</span>'); }; $(".sortable").sortable({ placeholder: "ui-state-highlight", //revert: true, grid: [20, 20], handle: '.editMove', opacity: 0.6, scroll: true, scrollSensitivity: 80, zIndex: 10 }); $(".sortable").disableSelection(); }); 

EDIT: Suppose for the .append () function? should there be a change function .live ()?

Cheers, Mike

Answer 1

I think the problem is that even if your conditional statement searches for ".ui-state-highlight" to be visible, this does not mean that "$ (this)" refers to this element, unless there is more to jQuery, which is not shown here. I have included a little jsfiddle below which helps explain, hope this helps!

EDIT: I included a new fiddle in which I'm 99% sure what you are looking for.

I set up a sortable list using an example directly located on the jQuery UI - Sortable page , and I looked at the Events embedded in it. There is an event called start that binds the event when sorting starts, I used this to add text to '.ui-state-highlight'

http://jsfiddle.net/6PrvC/

Answer 2

You can change the placeholder from the initial callback, for example:

 $('#my-sortable').sortable({ start: function(event, ui) { ui.placeholder.html('Placeholder Content!'); } });