Sortable.js :hover bug solution

by bc_rikko

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.5.1/Sortable.min.js"></script>
<ul id="bug">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
</ul>

<ul id="solution">
  <li class="item">1'</li>
  <li class="item">2'</li>
  <li class="item">3'</li>
</ul>

CSS

ul { float: left; }
.item {
  width: 100px;
  height: 100px;
  color: white;
  background-color: black;
  text-align: center;
  line-height: 100px;
  border: 1px solid white;
}
/* :hoverのスタイルが残る */
#bug > .item {
  background-color: red;
}
#bug > .item:hover {
  opacity: .5;
}

/* :hoverを使わない */
#solution > .item {
  background-color: blue;
}
#solution > .item.-hover {
  opacity: .5;
}

JavaScript

const bug = document.getElementById('bug');
Sortable.create(bug);

const solution = document.getElementById('solution');
Sortable.create(solution);

Array.from(solution.children).forEach(child => {
	child.addEventListener('mouseenter', event => {
    event.target.classList.add('-hover');
  });
	child.addEventListener('mouseleave', event => {
    event.target.classList.remove('-hover');
  });
});