Hi, 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.