draggable and droppable problems with li

draggable and droppable problems with li


Hi All,
I'm having problems with draggable and droppable with li elements. I
have a ul that is update using ajax, which populates a li. These li's
can be copied/dragged to another li, but changing some format, while
keeping the original li in place.
The problem is when I drag and drop the li, the original li is always
moved to the second ul.
If I remove the "droppable" I will have the same effect.
My code:
$j(document).ready(function() {
$j("#searchForm").ajaxForm({
url: "[@spring.url '/services/search.json' />",
dataType: "json",
success: populate,
beforeSubmit: function() {
$j("#searchResult").empty();
}
});
$j("#selectionList").droppable({
accept: ".draggableRoom",
drop: function(ev, ui) {
alert('hello');
}
});
});
function populate(data) {
$j.each(data.searchResult,function(i,room) {
var jli = $j(document.createElement("li"));
jli.addClass("draggableSala");
var inhtml = '<p class="roomName">' + room.nome +
''
+ '<p class="dep">' + room.dep.nome + ''
+ '<p class="space">' + room.space + ''
+ '<input type="hidden" name="sid" value="' +
room.id + '"/>';
jli.html(inhtml);
jli.draggable({helper: "clone", revert: true});
$j("#searchResult").append(jli);
});
}
Can anybody help me?
Thx in advance