jQuery 1.4.2 / jQuery UI droppable - remove(); issue with Internet Explorer or something wrong?

I'm using jQuery 1.4.2 (j is the .noConflict() ) / jQuery UI 1.8.5 and I'm experiencing a problem with the following code.

This runs well in Chrome, FireFox and Safari, but none in Internet Explorer. The alert(); fires but the following line (the remove(); ) no.

XHTML markup:

<div class="mainarea">
    <div class="dnd">
        <div class="person dad"></div>
        <div class="person mum"></div>
    </div>
</div开发者_高级运维>

<div class="tools">
   <div class="person dad"></div>
   <div class="person mum"></div>
   <div class="person boy"></div>
   <div class="person girl"></div>
   <div class="bin"></div>
</div>

Javascript code:

j(document).ready(function(){

    // make the source item draggable
    j('.tools .person').draggable({
        revert: "invalid", 
        helper: "clone"
    });

    // the target drag n'drop area
    j('.dnd').droppable({
            accept: ".tools > .person",
            revert: "invalid", 
            activeClass: "active",
            drop: function( event, ui ) {
                //copy from source and make it replaceable by another one
                var obj = ui.draggable.clone().droppable({  hoverClass: "active",   accept: ".tools .person"    });

                // in case of replace
                if( j(".dnd > .person.active").size() )
                    j(".dnd > .person.active").replaceWith( obj );
                else   // in case of new or limit reached
                    if( (j(".dnd > .person.active").size() == 0) && (j(".dnd > .person").size() < 4) )
                        obj.appendTo('.dnd');
            }
        });

    // the bin to delete the selected persons
    j('.bin').droppable({
            accept: ".dnd > .person",
            hoverClass: "active",
            drop: function( event, ui ) {
                            alert('debug');
                ui.draggable.remove();
            }
        });

    // makes drag n'drop is sortable
    j(".dnd").sortable({    placeholder: 'empty'    });

    //helpers
    j(".dnd").disableSelection();

});

Can somebody help me? Thanks.

It seems to work on IE6, IE7, and IE8 (live example), with this code (only addition is the draggable call):

jQuery.noConflict();
jQuery(function(j) {

  j('.dnd .person').draggable();
  j('.bin').droppable({
    accept: ".dnd .person",
    cursor: "not-allowed",
    hoverClass: "active",
    drop: function( event, ui ) {
      alert('test');
      j(ui.draggable).remove();
    }
  });
});​

And this markup:

<div class='dnd'>
  <span class='person'>person1</span>
  <span class='person'>person2</span>
</div>
<div class='bin'></div>

So the problem seems to exist outside of the code you've quoted. Perhaps the above will help. Creating a self-contained, minimalist example is frequently helpful — about 90-95% of the time, in the process of doing it you figure out what's wrong. The other 5-10%, you get a nice self-contained thing you can post to StackOverflow...

I had this problem too - i couldn't remove the element from the drop event, but i could do it form the sortables's stop event (which is fired last of all). so here is a fixed version of the original snippet at the top. i've added start and stop events to the sortable, and a deleteMe flag which is passed around:

deleteMe = false;

// make the source item draggable
j('.tools .person').draggable({
    revert: "invalid", 
    helper: "clone",

start: function(event, ui) { 
    deleteMe = false;
}
});

// the target drag n'drop area
j('.dnd').droppable({
        accept: ".tools > .person",
        revert: "invalid", 
        activeClass: "active",
        drop: function( event, ui ) {
            //copy from source and make it replaceable by another one
            var obj = ui.draggable.clone().droppable({  hoverClass: "active",   accept: ".tools .person"    });

            // in case of replace
            if( j(".dnd > .person.active").size() )
                j(".dnd > .person.active").replaceWith( obj );
            else   // in case of new or limit reached
                if( (j(".dnd > .person.active").size() == 0) && (j(".dnd > .person").size() < 4) )
                    obj.appendTo('.dnd');
        }
    });

// the bin to delete the selected persons
j('.bin').droppable({
        accept: ".dnd > .person",
        hoverClass: "active",
        drop: function( event, ui ) {
        deleteMe = true;                            
        }
    });

// makes drag n'drop is sortable
j(".dnd").sortable({    placeholder: 'empty' ,
                            stop: function(event, ui) { 
                                if (deleteMe) {ui.item.remove()}
                            }   });

//helpers
j(".dnd").disableSelection();