kineticjs mouseover/out not working with jquery drag

Question

When dragging a dom object onto a canvas I would like to enable a hover mode for the drop target, being an element of the canvas. In this example when I drag the button over the wedge the mouseover event is not fired. It only works if I drag quickly over the wedge e.g. http://jsfiddle.net/Z3Yp8/1

var stage = new Kinetic.Stage({
    container: 'canvas',
    width: 578,
    height: 200
});

var layer = new Kinetic.Layer();

var wedge = new Kinetic.Wedge({
        x: 150,
        y: 120,
        radius: 100,
        angle: 60,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        rotation: -120
    })
    .on('mouseover', function(){
        console.log('over wedge');
    })
    .on('mouseout', function(){      
        console.log('out wedge');
});

layer.add(wedge);
stage.add(layer);

$('#button').draggable({
    cancel:false,
    helper: function(){
        var _clone = $(this).clone().appendTo($('#container'));
        return _clone;
    }
})

Stephen

Answer 1

So the reason it's working when I swipe the dragged object quickly over the wedge is that the mouse pointer gets ahead of the dragged object and fires the wedge's mouseover event. When dragged at normal speed the dragged object is between the pointer and the wedge and will receive the mouseover event itself. To get around this I'm going to add the dragged clone to the containing div, arm the wedge as a dropzone when the mouseover event of that div is fired and disarm it when its mouseout event fires. I can then check which wedge the mouse was over when it let go of its dragged clone.