Slide Rearranger like Keynote

index.haml

%div.all-slides
  %h2.slides-title Slides
  - (1..10).each do |i|
    %div.slide Slide

%div#cloned-slides.cloned-slides 

script.js

// Some of this code is me
// Some of this code is this fiddle http://jsfiddle.net/dNfsJ/ thx to AJ for finding it for me.

$(".slide").each(function(i) {
  var item = $(this);
  var item_clone = item.clone();
  item.data("clone", item_clone);
  var position = item.position();
  item_clone
  .css({
    left: position.left,
    top: position.top,
    visibility: "hidden"
  })
    .attr("data-pos", i+1);
  
  $("#cloned-slides").append(item_clone);
});

$(".all-slides").sortable({
  
  axis: "y",
  revert: true,
  scroll: false,
  placeholder: "sortable-placeholder",
  cursor: "move",

  start: function(e, ui) {
    ui.helper.addClass("exclude-me");
    $(".all-slides .slide:not(.exclude-me)")
      .css("visibility", "hidden");
    ui.helper.data("clone").hide();
    $(".cloned-slides .slide").css("visibility", "visible");
  },

  stop: function(e, ui) {
    $(".all-slides .slide.exclude-me").each(function() {
      var item = $(this);
      var clone = item.data("clone");
      var position = item.position();

      clone.css("left", position.left);
      clone.css("top", position.top);
      clone.show();

      item.removeClass("exclude-me");
    });
    
    $(".all-slides .slide").each(function() {
      var item = $(this);
      var clone = item.data("clone");
      
      clone.attr("data-pos", item.index());
    });

    $(".all-slides .slide").css("visibility", "visible");
    $(".cloned-slides .slide").css("visibility", "hidden");
  },

  change: function(e, ui) {
    $(".all-slides .slide:not(.exclude-me)").each(function() {
      var item = $(this);
      var clone = item.data("clone");
      clone.stop(true, false);
      var position = item.position();
      clone.animate({
        left: position.left,
        top: position.top
      }, 200);
    });
  }
  
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

slide-rearranger-like-keynote.markdown

Slide Rearranger like Keynote

The reason it's so complicated, and not just like .sortable()'s default beahavior, is the "pushing" of the slides away.

A Pen by Chris Coyier on CodePen.

License.

style.scss

* {
  box-sizing: border-box;
}

html {
  font-family: "Lucida Grande","Lucida Sans Unicode", Tahoma, sans-serif;
  font-size: 13px;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: #8D939D;
  margin: 0;
}

.all-slides {
  background: #E3E7ED;
  counter-reset: slides;
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  padding: 3rem 1rem 1rem 2rem;
  height: 100%;
  overflow: auto;
}

.slides-title {
  position: fixed;
  background: #E3E7ED;
  z-index: 8;
  width: 150px;
  text-align: center;
  top: 0;
  left: 0;
  margin: 0;
  border-bottom: 1px solid #CDD1D8;
  color: #8585A2;
  padding: 0.5rem 0.25rem;
  font-size: 1rem;
}

.slide {
  width: 100px;
  height: 60px;
  background: linear-gradient(#444, #111);
  position: relative;
  user-select: none;
  border: 1px solid white;
  margin: 0 0 0.75rem 0;
  box-shadow: 0 0 5px rgba(black, 0.5);
  text-align: center;
  color: white;
  line-height: 60px;
  font-size: 0.5rem;
  z-index: 5;
  &:before {
    position: absolute;
    bottom: 0;
    right: 100%;
    counter-increment: slides;
    content: counter(slides);
    padding-right: 0.35rem;
    color: #999;
    line-height: normal;
    font-size: 1rem;
  }
}

.ui-sortable-helper {
  transition: none !important;
  animation: pulse 0.4s alternate infinite;
}

.sortable-placeholder {
  height: 60px;
  width: 5px;
  border-left: 2px solid #4999DA; 
  margin: 0 0 0.75rem 0;
  position: relative;
  z-index: 6;
}

@keyframes pulse {
  100% { transform: scale(1.1); } 
}

.cloned-slides {
  .slide {
    position: absolute;
    z-index: 1;
    &:before {
      content: attr(data-pos);
    }
  }
}

styles

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />