Rakesh Patidar February 2016

How to get drag hover event outside the sortable element

I am using the Jquery sortable to short the list and it's working but need to drag hover when drag hover is outside the sortable element. In below html I need to drag hover on 'Upper' and '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>

And I apply the sortable on 'slide'.

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

Answers


user2993454 February 2016

It will happen when you bind droppable events.

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

Post Status

Asked in February 2016
Viewed 2,560 times
Voted 5
Answered 1 times

Search




Leave an answer