I am currently using jQuery-ui sortable and facing an issue with changing the appearance of a dragged item. I would like the text value of the component inside the red background container to be displayed while dragging. Can someone please assist me with this?
Here is my progress so far: http://jsfiddle.net/Fyd48/5/. It is almost working as expected, where dragging 'super dooper' displays it with a red background. However, there is still a gray box surrounding it that looks odd. I'm not sure where this gray box is coming from. Could someone help me remove it?
$( "#container" ).sortable({
start: function(event, ui){
var text = $.trim(ui.item.text());
ui.item.startHtml = ui.item.html();
ui.item.html('<div style="display: inline-block;" class="rf-ind-drag default drag">' + text + '</div>');
},
stop: function(event, ui){
ui.item.html(ui.item.startHtml);
}
});
$( "#container" ).disableSelection();