Question

我使用Jquery sortable来缩短列表并且它正在工作但是当拖动悬停在可排序元素之外时需要拖动悬停。在下面的html中，我需要将鼠标悬停在“Upper”和“Bottom”上。

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

我在'幻灯片'上应用了sortable。

$("#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

如何在可排序元素之外拖动悬停事件

1 个答案: