[jQuery] Drag- & Droppables using Interface
I just found this group yesterday, and I've already found a lot of
good advice from reading old posts. But I couldn't find a solution to
some weird behaviour I'm having.
I am using jquery together with Interface to play around a bit with
drag&drop + ajax. So a basic test was to move an element between two
lists. The code I've come up with looks like this:
$(document).ready(function(){
$('body').mouseover(function(event){
if ($(event.target).is('li')){
$(event.target).Draggable({revert: true, fx: 300, ghosting: true,
opacity: 0.4});
}
});
$('.group, #charter').Droppable(
{
accept : 'character',
activeclass: 'activeGroup',
hoverclass: 'hoverGroup',
tolerance: 'pointer',
onDrop: addCharToGroup
}
);
});
var addCharToGroup = function(dragged)
{
var groupID = $(this).attr('id');
var charName = $(dragged).html();
$('#' + groupID + ' ul').append('<li class="character">' + charName
+ '</li>');
$(dragged).remove();
}
I'm not sure if binding the mouseover event to add ".Draggable" to new
list items is a "ghetto" solution, but it seems to be working fine.
My problem is that every now and then, the item I move will duplicate
itself. Is there any other way I should be removing the original item
after moving it?
/ Fredrik