jQuery的可排序悬停事件由捕获的元素

Question

让我们以简单的可排序为例，链接显示在末尾。

如果我们捕获到列表中的任何幻灯片，是否有可能例如将它们悬停在console.log元素上？为了描述更多，如果我们单击幻灯片1将它们放在幻灯片2下方，我们将幻灯片2悬停在幻灯片1上，是否可以在此操作中选择幻灯片2？

示例：

var isScreenDrag = true;
$("#slide").sortable({
    placeholder: 'slide-placeholder',
    axis: "y",
    revert: 150,
    start: function(e, ui) {
        if (isScreenDrag) {
            isScreenDrag = false;
            $('body').one("mouseleave", function() {
                $('body').mouseup();
                isScreenDrag = true; //event occured, rebind
            });
        } else {
            isScreenDrag = false;
        }
        placeholderHeight = ui.item.outerHeight();
        ui.placeholder.height(placeholderHeight + 15);
        $('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);

    },
    change: function(event, ui) {

        ui.placeholder.stop().height(0).animate({
            height: ui.item.outerHeight() + 15
        }, 300);

        placeholderAnimatorHeight = parseInt($(".slide-placeholder-animator").attr("data-height"));

        $(".slide-placeholder-animator").stop().height(placeholderAnimatorHeight + 15).animate({
            height: 0
        }, 300, function() {
            $(this).remove();
            placeholderHeight = ui.item.outerHeight();
            $('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);
        });

    },
    stop: function(e, ui) {

        $(".slide-placeholder-animator").remove();

    }
});
$(".DragHover").droppable({
    over: function(event, ui) {
        console.log('over');
    },
    out: function(event, ui) {
        console.log('out');
    }
});

body {
    padding: 20px;
}
#slide {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 300px;
}
.slide {
    padding: 15px;
    background-color: #2F2F2F;
    margin: 0 0 15px;
    text-align: center;
    color: #FFF;
    border: 2px solid #444;
}

.slide-placeholder {
	background: #DADADA;
	position: relative;
}
.slide-placeholder:after {
	content: " ";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 15px;
	background-color: #FFF;
}
.bottom, .upper{    
	height: 30px;
    text-align: center;
}
.container{width:300px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="container">
	<div class="DragHover upper">Upper</div>
	<ul id="slide">
	  <li class="slide">Slide 1</li>
	  <li class="slide">Slide 2</li>
	  <li class="slide">Slide 3</li>
	  <li class="slide">Slide 4</li>
	  <li class="slide">Slide 5</li>
	</ul>
	<div class="DragHover bottom">Bottom</div>
</div>