New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
:hover bug #232
Comments
This native browser behavior. |
amazing, thanks! |
I still see bugs here in Chrome 40.0.2214.94 (Mac 64-bit). |
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:
|
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. |
My partial solution was: |
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. My own workaround: Just don't use .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. |
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!
The text was updated successfully, but these errors were encountered: