Sortable List

index.html

<section class="container">
  
  <div class="list-item">
    <div class="item-content">
      <span class="order">1</span> Alpha
    </div>
  </div>
  
  <div class="list-item">
    <div class="item-content">
      <span class="order">2</span> Bravo
    </div>
  </div>
  
  <div class="list-item">
    <div class="item-content">
      <span class="order">3</span> Charlie
    </div>
  </div>
  
  <div class="list-item">
    <div class="item-content">
      <span class="order">4</span> Delta
    </div>
  </div>
  
</section>

script.babel

var rowSize   = 100; // => container height / number of items
var container = document.querySelector(".container");
var listItems = Array.from(document.querySelectorAll(".list-item")); // Array of elements
var sortables = listItems.map(Sortable); // Array of sortables
var total     = sortables.length;

TweenLite.to(container, 0.5, { autoAlpha: 1 });

function changeIndex(item, to) {
    
  // Change position in array
  arrayMove(sortables, item.index, to);
    
  // Change element's position in DOM. Not always necessary. Just showing how.
  if (to === total - 1) {
    container.appendChild(item.element);    
  } else {    
    var i = item.index > to ? to : to + 1;
    container.insertBefore(item.element, container.children[i]);
  }    
    
  // Set index for each sortable
  sortables.forEach((sortable, index) => sortable.setIndex(index));
}

function Sortable(element, index) {
    
  var content = element.querySelector(".item-content");
  var order   = element.querySelector(".order");
  
  var animation = TweenLite.to(content, 0.3, {
    boxShadow: "rgba(0,0,0,0.2) 0px 16px 32px 0px",
    force3D: true,
    scale: 1.1,
    paused: true
  });
  
  var dragger = new Draggable(element, {        
    onDragStart: downAction,
    onRelease: upAction,
    onDrag: dragAction,
    cursor: "inherit",    
    type: "y"
  });
  
  // Public properties and methods
  var sortable = {
    dragger:  dragger,
    element:  element,
    index:    index,
    setIndex: setIndex
  };
  
  TweenLite.set(element, { y: index * rowSize });
    
  function setIndex(index) {
    
    sortable.index = index;    
    order.textContent = index + 1;
    
    // Don't layout if you're dragging
    if (!dragger.isDragging) layout();
  }
  
  function downAction() {
    animation.play();
    this.update();
  }
  
  function dragAction() {
    
    // Calculate the current index based on element's position
    var index = clamp(Math.round(this.y / rowSize), 0, total - 1);
    
    if (index !== sortable.index) {
      changeIndex(sortable, index);
    }
  }
  
  function upAction() {
    animation.reverse();
    layout();
  }
  
  function layout() {    
    TweenLite.to(element, 0.3, { y: sortable.index * rowSize });  
  }
    
  return sortable;
}

// Changes an elements's position in array
function arrayMove(array, from, to) {
  array.splice(to, 0, array.splice(from, 1)[0]);
}

// Clamps a value to a min/max
function clamp(value, a, b) {
  return value < a ? a : (value > b ? b : value);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/utils/Draggable.min.js"></script>

Sortable List.markdown

Sortable List

Sortable list based on this Framer.js example.

A Pen by 张小张 on CodePen.

License.

style.scss

html, body {
  height: 100%;
}

body {
  cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/cursor.png") 32 32, auto;
  background: rgb(238,238,238);
  overflow: hidden;  
}

*, *:before, *:after {
  box-sizing: border-box;
}

.container {
  position: relative;  
  top: 50%;
  left: 50%;  
  width: 320px;
  height: 400px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%);
}

.list-item {  
  position: absolute;
  top: 0;
  left: 0;  
  height: 90px;
  width: 100%;  
}

.item-content {
  height: 100%;
  border: 0px solid rgba(123, 123, 123, 0.498039);
  border-radius: 4px;
  color: rgb(153, 153, 153);
  line-height: 90px;
  padding-left: 32px;
  font-size: 24px;
  font-weight: 400;
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0,0,0,0.2) 0px 1px 2px 0px;
}