[jQuery] Drag- & Droppables using Interface

[Fredrik Karlsson]

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