Question

将dom对象拖到画布上时，我想为放置目标启用悬停模式，作为画布的元素。在此示例中，当我将按钮拖到wedge上时，不会触发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;
    }
})

斯蒂芬

Answer 1

因此，当我在楔形物上快速滑动拖动的物体时，它的工作原理是鼠标指针位于拖动的物体之前并触发楔形物的鼠标悬停事件。当以正常速度拖动时，拖动的对象位于指针和楔形之间，并且将自己接收鼠标悬停事件。为了解决这个问题，我将把拖动的克隆添加到包含的div中，当触发该div的mouseover事件时将楔形作为dropzone，并在其mouseout事件触发时解除它。然后，当它放开拖动的克隆时，我可以检查鼠标在哪个楔子上。

kineticjs mouseover / out无法使用jquery拖动

1 个答案: