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

jQuery SortScrollは”UP” “DOWN”ボタンをクリックして、ページ上の要素の順序を変更できるjQueryプラグイン。
ドラッグ&ドロップ並べ替えではなく要素をスクロールしながら、並びを変えます。
<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>
<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>
.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; }
$(".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) });
$(".sort-scroll-container").sortScroll("sortElement",3,-1,false)
$(".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); }