Open danielsedlacek opened 9 years ago
This native browser behavior. Try workaround: http://jsbin.com/pafisicika/1/edit?css,js,output
amazing, thanks!
I still see bugs here in Chrome 40.0.2214.94 (Mac 64-bit). The workaround doesn't help. And behavior is not stable. It looks like from time to time some blocks don't lose :hover state so I see more than one hovered items.
I'm noticing the same thing as @shvechikov, the :hover state seems to be applied to a dragged element's adjacent nodes. As an unfortunate workaround, I'm using mousenter and mouseleave events to style hovered elements.
Still no solution? Workaround didn't helped me too Chrome Version 49.0.2623.87 m
EDIT: Made my own workaround ( possible might work only for me ):
I have the same issue in Chrome. On drag end, the row after the dropped row receives :hover state unintentionally. It is only removed as soon as I actually hover it and then move the cursor off.
I'm using the Angular version and using jfurrow's workaround of mouseenter and mouseleave, which does work for me.
I have same issue with @dannybranton
Hi. I have the same issue using Chrome. I think this is related to https://bugs.chromium.org/p/chromium/issues/detail?id=410328
My partial solution was: In mouseenter I add the hover class and mouseleave I remove the hover class.
My solution:
.is-dragging {
pointer-events: none;
}
onStart: function () {
this.el.classList.add('is-dragging');
},
onEnd: function (evt) {
this.el.classList.remove('is-dragging');
}
Same issue on Chrome and Chromium 57. None of the workarounds seems to work.
My own workaround: Just don't use :hover
.list-item
// Styles...
&--hover
background-color: your-color
window.onload = function(){
var list = document.getElementById('list');
Sortable.create(list);
$('.list-item').bind('mouseenter', function(){
$(this).addClass('list-item--hover');
}).bind('mouseleave', function(){
$(this).removeClass('list-item--hover');
});
}
Same issue on Chrome 60.
Same on Chrome 62
Same on Chrome 66
Same problem. Can this issue be reopened? @RubaXa
Same on Chrome 76
Same on Chrome 81
Same on Chrome 85
Reopening as it keeps happening.
Workaround from @igloro works.
You can use :before
/:after
pseudo element instead of real element:
https://codesandbox.io/s/demo--sjs-disable-hovering-siblings-using-overlay-pel05
Same on Chrome 96
Same on Safari 15.1
My solution:
var onDrag=false;
Sortable.create(foo, {
group: 'foo',
animation: 100,
onStart:event=>onDrag=true,
onEnd:event=>onDrag=false,
});
document.querySelectorAll("li").forEach((item) => {
item.addEventListener("mouseenter", function () {
if (!onDrag) {
this.style.backgroundColor = "pink";
}
});
item.addEventListener("mouseleave", function () {
this.style.backgroundColor = "#eee";
});
});
Same on Chrome 99
Still the same on Chrome 111. Not an issue on FF.
Can we please have a fix? Same on Chrome 122.0.6261.112. No issue on Firefox.
Hi Konstantin
there is a small bug, if the list element has hover effect this is strangely copied to the nearby elements when dragging starts.
http://jsbin.com/lipatehubu/1/edit?css,js,output
Thanks for this amazing library!