:hover bug

[danielsedlacek]

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!

[RubaXa]

This native browser behavior. Try workaround: http://jsbin.com/pafisicika/1/edit?css,js,output

[danielsedlacek]

amazing, thanks!

[shvechikov]

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.

[jfurrow]

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.

[igloro]

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 ):

1. Have added hidden helper block with position: absolute inside sortable elements over sensetive elements
2. Display it onStart
3. Hide it onEnd

[dannybranton]

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.

[oknoorap]

I have same issue with @dannybranton

[maxired]

Hi. I have the same issue using Chrome. I think this is related to https://bugs.chromium.org/p/chromium/issues/detail?id=410328

[marlonmleite]

My partial solution was: In mouseenter I add the hover class and mouseleave I remove the hover class.

[asakasinsky]

My solution:

.is-dragging {
  pointer-events: none;
}

onStart: function () {
  this.el.classList.add('is-dragging');
},
onEnd: function (evt) {
  this.el.classList.remove('is-dragging');
}

[pedroadame]

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

[kuroky360]

Same issue on Chrome 60.

[jstevensstein]

Same on Chrome 62

[itayganor]

Same on Chrome 66

[tomo-it]

Same problem. Can this issue be reopened? @RubaXa

[quantpioneer]

Same on Chrome 76

[gambolputty]

Same on Chrome 81

[garcia-marco]

Same on Chrome 85

[waynevanson]

Reopening as it keeps happening.

[olegcherr]

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

[asssc]

Same on Chrome 96

[AlexR2D2]

Same on Safari 15.1

[a90120411]

My solution:

JSBin

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

[toniengelhardt]

Same on Chrome 99

[steve-scorn]

Still the same on Chrome 111. Not an issue on FF.

[ianthedev]

Can we please have a fix? Same on Chrome 122.0.6261.112. No issue on Firefox.