如何在可排序元素外部獲得拖動懸停事件

Question

我正在使用Jquery排序來縮短列表並且它正在工作，但當拖動懸停在可排序元素之外時需要拖動懸停。在下面的HTML我需要拖動懸停'上'和'底部'。

<div class="container"> 
    <div class="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="bottom">Bottom</div> 
</div> 

而我在'幻燈片'上應用排序。

$("#slide").sortable({ 
placeholder: 'slide-placeholder', 
axis: "y", 
revert: 150, 
start: function(e, ui){ 

    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(); 

} 
}); 

CSS

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

jsfiddle

Answer 1

在綁定投擲的事件將會發生。

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

Fiddle Example