hoverClass does not work if sortable item contains inner elements

[chuen1118]

I'm opening this issue because:

I used wrappers to group some elements, and wanted to re-order the wrappers.
css of hoverClass set in config would not show up since most of the time my cursor is on a child element.

It is probably result of this line,

html5sortable/docs/html5sortable.js

Line 642 in e8da2be

if (item !== event.target) {

the event.target from a child element will not match item

supporting information:

• I use sortable version: v0.9.16
• I tested in the following browser (incl. versions): Google Chrome (74.0.3729.169)
• Windows, OS X/macOS, or Linux?: Windows

How can the issue be reproduce the problem?

Wrap the list content text of the first example provided in a <p>, item no longer changes to maroon when hovered.

<ul class="ml4 js-sortable sortable list flex flex-column list-reset">
    <li class="mb1 navy bg-yellow" style="position: relative; z-index: 10"><p class="mb0 p1">Item 1</p></li>
    <li class="mb1 navy bg-yellow" style="position: relative; z-index: 10"><p class="mb0 p1">Item 2</p></li>
    <li class="mb1 navy bg-yellow" style="position: relative; z-index: 10"><p class="mb0 p1">Item 3</p></li>
    <li class="mb1 navy bg-yellow" style="position: relative; z-index: 10"><p class="mb0 p1">Item 4</p></li>
    <li class="mb1 navy bg-yellow" style="position: relative; z-index: 10"><p class="mb0 p1">Item 5</p></li>
    <li class="mb1 navy bg-yellow" style="position: relative; z-index: 10"><p class="mb0 p1">Item 6</p></li>
</ul>

As a quick fix I modified the html5sortable.js, adding a class to all sortable-list

// property to define as sortable
sortableElement.isSortable = true;
sortableElement.classList.add("isSortable");

then check if the event.target a descendant of item and if they share the same parent sortable-list

if (!item.contains(event.target) || item.closest(".isSortable") !== event.target.closest(".isSortable")) {
    (_a = item.classList).remove.apply(_a, hoverClasses_1);
}

Hope this would be helpful, not sure if this will cause any conflicts.

[lukasoppermann]

Hey, if you can add this as a PR with a test and make sure it only runs when a hoverClass is set, I am very happy to merge it. 👍