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

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);
}
 

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

  • LATEST
  • RELATED
  • POPULAR