kineticjs mouseover/out 不适用于 jquery 拖动答案

【问题标题】：kineticjs mouseover/out not working with jquery dragkineticjs mouseover/out 不适用于 jquery 拖动
【发布时间】：2014-05-29 15:55:47
【问题描述】：

当将 dom 对象拖到画布上时，我想为放置目标启用悬停模式，作为画布的一个元素。在此示例中，当我将按钮拖到楔形上方时，不会触发 mouseover 事件。它只有在我快速拖过楔子时才有效，例如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;
    }
})

斯蒂芬

【问题讨论】：

标签： jquery draggable kineticjs mousehover

【解决方案1】：

所以当我在楔形上快速滑动拖动的对象时它起作用的原因是鼠标指针领先于拖动的对象并触发楔形的鼠标悬停事件。当以正常速度拖动时，被拖动对象位于指针和楔形之间，并将接收鼠标悬停事件本身。为了解决这个问题，我要将拖动的克隆添加到包含的 div 中，当该 div 的 mouseover 事件被触发时将楔形物作为 dropzone 武装起来，并在其 mouseout 事件触发时解除它。然后我可以检查鼠标放开拖动的克隆时鼠标在哪个楔子上。

【讨论】：