jQuery sort Scroll v1.3.0

Demo

Click on the "down" arrow to change this paragraph's order in the page.
The element being sorted will stay still while the rest of the page will scroll behind it.

Set-up

<!-- insert jQuery sortScroll after jQuery core -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/jadus/jquery-sortScroll/v1.3.0/jquery.sortScroll.min.js"></script>

Basic usage

<!--
automatic initialization using css classes
you can use data attributes to change settings
animationDuration : duration of the animation in ms (default : 1000)
cssEasing : easing type for the animation (default : "ease-in-out")
keepStill : if false the page doesn't scroll to follow the element (default : true)
fixedElementsSelector : a jQuery selector so that the plugin knows your fixed elements (like the fixed nav on the left) (default : "")
-->
<div class="sort-scroll-container" data-animation-duration="1000" data-css-easing="ease-in-out" data-keep-still=true data-fixed-elements-selector=".navigation">
    <div class="sort-scroll-element">
        content1
        <button class="sort-scroll-button-up">up</button>
        <button class="sort-scroll-button-down">down</button>
    </div>
    <div class="sort-scroll-element">
        content2
        <button class="sort-scroll-button-up">up</button>
        <button class="sort-scroll-button-down">down</button>
    </div>
    <!-- more elements -->
</div>

Styling

/** jQuery-sortScroll is adding .sort-scroll-sorting to the element being sorted **/
.sort-scroll-sorting{
    background-color: rgba(255, 255, 255, 0.80);
}

/** You can of course hide or disable up and down buttons for first and last elements **/
.sort-scroll-element:nth-of-type(1) .sort-scroll-button-up, .sort-scroll-element:nth-last-of-type(1) .sort-scroll-button-down {
    pointer-events: none;
    cursor: default;
    color: #ddd;
}

Javascript initialization

// showing default options here
$(".my-container-class").sortScroll({
    animationDuration: 1000,// duration of the animation in ms
    cssEasing: "ease-in-out",// easing type for the animation
    keepStill: true,// if false the page doesn't scroll to follow the element
    fixedElementsSelector: ""// a jQuery selector so that the plugin knows your fixed elements (like the fixed nav on the left)
});

Events

//you can do something when sorting starts and when it's done
$(".sort-scroll-container").on("sortScroll.sortStart", function(event, element, initialOrder, destinationOrder){
    var title = element.find("h4").text();
    console.log("element named "+title+" is being reordered from slot n°"+initialOrder+" to slot n°"+destinationOrder);
}

$(".sort-scroll-container").on("sortScroll.sortEnd", function(event, element, initialOrder, destinationOrder){
    var title = element.find("h4").text();
    console.log("element named "+title+" was reordered from slot n°"+initialOrder+" to slot n°"+destinationOrder);
}

About