Droppable container only able to be used once on IE
I have a table where all cells use the class ".droppable" and I have
images that have the class ".draggable". I run a function that looks
like this:
jQuery('.draggable').draggable(
{
helper: 'clone',
start: function(event, ui) {
thisClass.dragFromParent = jQuery(event.target.parentNode);
},
});
jQuery('.droppable').droppable(
{
drop: function(dropInfo,dragInfo) {
dragToParent = jQuery(dropInfo.target);
if(dragToParent.children().length > 0)
{
existingItem = jQuery(dragToParent.children()[0]);
existingItem.appendTo(thisClass.dragFromParent);
}
dragToParent.html("");
jQuery(dragInfo.draggable[0]).appendTo(dragToParent);
},
hoverClass: 'droppableHover',
greedy:true
});
I can successfully drag an image into table cell A. I can then re-drag
the same image out of table cell A into table cell B. At this point,
table cell A is no longer droppable. I can't drag anything into it.
This problem only happens in IE. In Firefox, it works fine. Any
suggestions?
The only other weird IE-only thing is that the helper object's
position is about 50 pixels south of where it should be. I'm guessing
this is related to CSS positioning or something. I threw in an IE-only
offset to account for this.