悬停出现在错误的位置

Question

我使用AngularJS创建了一个拖放列表和插件＆＃34;拖放列表＆＃34;但由于某种原因，当我移动某个项目时，它会徘徊错误的项目。

如果我将鼠标悬停在错误悬停的项目上，则悬停消失。

有谁知道它为什么会发生？

JSFIDDLE ：https://jsfiddle.net/83gbS/60/

HTML ：

<div ng-app="DemoApp">
    <div ng-controller="DemoCtrl">
        <ul dnd-list="categories" class="categories">
            <li
                ng-repeat="category in categories"
                dnd-draggable="category"
                dnd-droppable-in=".categories"
                dnd-effect-allowed="move"
                dnd-moved="categories.splice($index, 1)"
            >
                {{ category.name }}
            </li>
        </ul>
    </div>
</div>

使用Javascript / AngularJS ：

angular
    .module(
        'DemoApp',
        [ 'dndLists' ]
    )
    .controller(
        'DemoCtrl',
        function($scope) {
            $scope.categories = [
                {
                    name: "Category 1"

                },
                {
                    name: "Category 2"
                },
                {
                    name: "Category 3",

                },
                {
                    name: "Category 4"

                },
                {
                    name: "Category 5"
                },
                {
                    name: "Category 6",

                }
            ];
        }
    );

CSS ：

ul[dnd-list] * { 
    pointer-events: none; 
}

ul[dnd-list], ul[dnd-list] > li { 
    pointer-events: auto;
    position: relative;
}

ul[dnd-list] {
    min-height: 42px;
    padding-left: 0px;
}

ul[dnd-list] .dndDraggingSource {
    display: none;
}

ul[dnd-list] .dndPlaceholder {
    display: block;
    background-color: #ddd;
    min-height: 42px;
}

ul[dnd-list] li {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    cursor: pointer;
}

ul[dnd-list] li.selected {
    background-color: #dff0d8;
    color: #3c763d;
}
ul[dnd-list] li:active{
    background:pink;
}
ul[dnd-list] li:hover{
    background:yellow;
}

GIF示例：