/ / Mouseenter evento em, com problema arrastar evento ruim - javascript, jquery, eventos, arrastar e soltar

Evento Mouseenter em, com problema de arrasto evento ruim - javascript, jquery, eventos, arrastar e soltar

Estou a usar arraste e solte eventos de jquery. Eu tenho algum problema com o evento drag. Eu preciso adicionar alguma borda para algum elemento sobre a bruxa que eu estou atualmente arrastando. Eu tenho uma resposta estranha, porque se eu faço meu arrastar rápido eu vejo a borda adicionar ação, mas por um momento e ele desaparece. Então este é o meu código e exemplo deste problema. Alguém pode ajudar?

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/

Respostas:

1 para resposta № 1

dose mouseenter não bolha

Se arrastar e passar o mouse sobre .drag, .drag previna .drop mouseenter.

Licença rápida do movimento do rato .drag e fogo. Mouseenter do sopro.

amostra melhorada

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");
})
;

});

adicione drop dummy e, se arrastado, o z-index fictício defina 100.