jQuery

【jQuery】移動せずに要素をソート。jQuery SortScroll

December 22, 2015

jQuery SortScrollは”UP” “DOWN”ボタンをクリックして、ページ上の要素の順序を変更できるjQueryプラグイン。
ドラッグ＆ドロップ並べ替えではなく要素をスクロールしながら、並びを変えます。

JS

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

HTML

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

CSS

.sort-scroll-sorting{
    background-color: rgba(255, 255, 255, 0.80);
}
.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初期化

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

Programmatic sorting

$(".sort-scroll-container").sortScroll("sortElement",3,-1,false)

Events

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

Demo/Download