JQuery UI: Drag-and-drop disables mouseover events?

Question

I'm trying to have both mouseover events and drag-and-drop using JQuery and JQuery UI.

I currently have a working prototype here: http://dan.taeyounglee.com/othersites/m-p/ch18.php.

As you can see, if you move your mouse over the images, through a hover event that's bound to the artworks on the left, a separate corresponding div is hidden/shown. This works fine. But once you drag-and-drop one of the artworks onto the dotted-line areas, the hover no longer works.

Here's the hover code:
$(".artwork").hover(function () {
var hoverid = $(this).attr('id');
var hovernum = hoverid.split("img")[1];
$('.explanation').hide();
$("#explanation" + hovernum).show();
},
function() {
$('.explanation').hide();
});


It seems that something in JQuery UI is disabling the hover effect? I'm not sure how to fix this, and I've tried using mouseover/mousestart; it's the same.

Any ideas? Thanks!

Answer 1

You have to re-assign the event to the object after dropping it.

The drag and drop is probably removing the old object and putting a clone of it in the new place. Rather than maintaining the same element.

I just tested this using the console in FF3 and it works. Place that logic in a method that can be called by the end drag or drop event.