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和fire .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');
})
;

}）;

添加drop dummy，如果拖动，则伪z-index设置为100。

鼠标中心事件in，on，拖动事件不良问题

1 个答案: