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.