When a object is dragged and dropped from one div to another, the format in li gets changes to text only. I want it in the same format i.e 'li' after droping it.
$(function() {
$( "#catalog ul" ).sortable({
zIndex: 10000,
revert: true
});
$( "#catalog" ).accordion();
$( "#catalog ul" ).draggable({
appendTo: "body",
helper: "clone",
zIndex: 10000
});
$( "#dialogIteration ol" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$( this ).removeClass( "ui-state-default" );
}
});
$( "ul, li" ).disableSelection();
$("#dialogIteration").dialog();
});
Demo: http://jsfiddle.net/coolanuj/7683X/7/
