Minimal Smooth Sorting Plugin with jQuery - sortScroll

sortScroll is a jQuery sorting plugin that allows sorting of html elements with a smooth scrolling effect rather than moving with drag and drop.

Basic usage:

1. Load jQuery library and the jQuery sortScroll plugin in the html document when needed.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.sortScroll.min.js"></script>

2. Add a group of sortable elements into your webpage and use data attribute to customize the sorting behaviors.

• data-animation-duration: duration of the animation in ms
• data-cssEasing: "ease-in-out": easing type for the animation
• data-keepStill: true: if false the page doesn't scroll to follow the element
• data-fixedElementsSelector: "": a jQuery selector so that the plugin knows your fixed elements (like a fixed header)

<div class="sort-scroll-container" 
     data-animation-duration="1000" 
     data-css-easing="ease-in-out" 
     data-keep-still=true 
     data-fixed-elements-selector="">
  <div class="sort-scroll-element">
    content 1
    <button class="sort-scroll-button-up">up</button>
    <button class="sort-scroll-button-down">down</button>
  </div>
  <div class="sort-scroll-element">
    content 2
    <button class="sort-scroll-button-up">up</button>
    <button class="sort-scroll-button-down">down</button>
  </div>
  <div class="sort-scroll-element">
    content 3
    <button class="sort-scroll-button-up">up</button>
    <button class="sort-scroll-button-down">down</button>
  </div>
</div>

3. You can also initialize the plugin and pass the options as an object via JavaScript.

$(".selector").sortScroll({
  animationDuration: 1000,
  cssEasing: "ease-in-out",
  keepStill: true,
  fixedElementsSelector: ""
});

---

This awesome jQuery plugin is developed by jadus. For more Advanced Usages, please check the demo page or visit the official website.