0

I currently have a list of items which I am allowing users to re-arrange; please check out the snippet.

The re-arrange is working well but I have a fixed height on the list box and I would like for the highlighted item to stay in sight while it gets moved up and down in the list.

To re-create my issue simply hit the Move Down button a few times and Item 2 will go out of view. You must scroll in order to see it again. This behavior is not desired.

Any guidance will be greatly appreciated!

$('.move-up').on('click', function(){
    var $active = $('.active');
    $active.insertBefore($active.prev('div'));
    scroll_to_element();
});
$('.move-down').on('click', function(){
    var $active = $('.active');
    $active.insertAfter($active.next('div'));
    scroll_to_element();
});

function scroll_to_element(){
    $('.list').animate({
        scrollTop: $(".active").offset().top
    }, 0);
}
.list{
    overflow:scroll;
    height:200px;
}
.list div{
    padding:10px;
}
.list div.active {
    background-color: #ffff7f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="list">
    <div>Item 1</div>
    <div class="active">Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
</div>

<button type="button" class="move-up">Move Up</button>
<button type="button" class="move-down">Move Down</button>
MonkeyZeus
  • 18,445
  • 3
  • 30
  • 67
  • 1
    `This behavior is not desired.`, ok, but what *is* the desired behavior? Do you want the list to scroll with the selected item? Or something else? – Matt Burland Apr 17 '15 at 18:36
  • @MattBurland Yes, as stated in my post. – MonkeyZeus Apr 17 '15 at 18:37
  • your question says "would like for the highlighted item to stay in sight while it gets moved up and down in the list" it does not say how you want it to "stay in sight". – Matt Burland Apr 17 '15 at 18:45
  • 1
    You may use scrollTop function. $('.list').animate({ scrollTop: $(".active").offset().top }, 2000); }); – imnancysun Apr 17 '15 at 18:47
  • @MattBurland stay in sight by being visible to the human eye. – MonkeyZeus Apr 17 '15 at 18:50
  • Thanks @imnancysun but unfortunately that solution provides a jittery experience. Any ideas on how to avoid that? I've updated my snippet – MonkeyZeus Apr 17 '15 at 18:53
  • Yes, everybody knows what visible means. Being sarcastic isn't a way to get people to help you. You can keep in in sight by way other than scrolling. You could make the div larger so it displays more of the list. You could prevent it from going off the end off (visible portion of) the list. If you want it to scroll, you should just *say that in your question* rather than expecting people to guess. – Matt Burland Apr 17 '15 at 19:20

1 Answers1

0

If what you are willing is to trigger a scroll to the desirect element, you can easily do that with VelocityJS It a nice librairy (50kb) that is perfect for animation and scroll event.

Just add something like the scroll demo for your need Velicoy SCROLL Demo 

$("#element3").velocity("scroll", { 
  container: $("#container"),
  duration: 800,
  delay: 500
});
James Montagne
  • 73,502
  • 13
  • 107
  • 127
aorfevre
  • 4,854
  • 3
  • 19
  • 50