Mouseenter 事件在，在，与拖动事件坏问题

Question

我正在使用drag and drop jquery 事件。我对拖动事件有一些问题。我需要为我目前正在拖动的女巫上的某些元素添加一些边框。我有一个奇怪的反应，因为如果我快速拖动，我会看到边框添加动作，但有一刻它消失了。所以这是我的代码和这个问题的例子。有人可以帮忙吗？

jQuery(function($){
    $('.drag')
        .drag("start",function( ev, dd ){
            return $( this ).clone()
                .css("opacity", .75 )
                .appendTo( this.parentNode );
        } )
        .drag(function( ev, dd ){
            $( dd.proxy ).css({
                top: dd.offsetY,
                left: dd.offsetX
            } );
            $('.drop').on('mouseenter', function(){
                $(this).css('border','3px solid #ccc');
            });
            $('.drop').on('mouseleave', function(){
                $(this).css('border','none');
            });
        })
        .drag("end",function( ev, dd ){
            $( dd.proxy ).remove();
        });
    $('.drop').drop(function( ev, dd ){
        $( this ).toggleClass('dropped');
    } );
} );

jsFiddle：http://jsfiddle.net/3ydc8/

Answer 1

mouseenter dose not bubble

如果将鼠标拖到 .drag 上，.drag 会阻止 .drop mouseenter。

快速鼠标移动离开 .drag 并触发 .drop mouseenter。

improved sample

jQuery(function($){
var drop = $(".drop");
var dropDummy = $(".drop")
.clone()
.css({
    'position' : 'absolute'
    , 'opacity' : 0
    , 'top' : $(".drop").position().top
    , 'left' : $(".drop").position().left
    , 'z-index' : -1
     })
.appendTo('body')
;
$('.drag')
    .drag("start",function( ev, dd ){
        return $( this ).clone()
            .css("opacity", .75 )
            .css("width", "30px")
            .appendTo( this.parentNode );
    } )
    .drag(function( ev, dd ){
        dropDummy.css('z-index', 100);
        $( dd.proxy ).css({
            top: ev.pageY,
            left: ev.pageX
        } )
        ;
    })
    .drag("end",function( ev, dd ){
        dropDummy.css('z-index', -1);
        $( dd.proxy ).remove();
    });

drop.drop(function( ev, dd ){
    $( this ).toggleClass('dropped');
} );

dropDummy
.on('mouseenter', function() {
    drop.css('border','3px solid #ccc');
})
.on('mouseleave', function() {
    drop.css('border','none');
})
;

});

添加放置虚拟对象，如果被拖动，虚拟 z-index 设置为 100。