Slides Drag-n-Drop Example using Sortable

App.md

Slides Drag-n-Drop Example

index.html

<h2>Current order of Slides: <em id="cOrder"></em></h2>
<div class="slides">
  <div class="slide" data-slide-id="1">
    <span class="dragHandle"></span>
    <span>1</span>
  </div>
  <div class="slide" data-slide-id="2">
    <span class="dragHandle"></span>
    <span>2</span>
  </div>
  <div class="slide" data-slide-id="3">
    <span class="dragHandle"></span>
    <span>3</span>
  </div>
  <div class="slide no-drag" data-slide-id="4">
    <span class="dragHandle"></span>
    <span>4</span>
  </div>
  <div class="slide" data-slide-id="5">
    <span class="dragHandle"></span>
    <span>5</span>
  </div>
  <div class="slide" data-slide-id="6">
    <span class="dragHandle"></span>
    <span>6</span>
  </div>
  <div class="slide" data-slide-id="7">
    <span class="dragHandle"></span>
    <span>7</span>
  </div>
  <div class="slide" data-slide-id="8">
    <span class="dragHandle"></span>
    <span>8</span>
  </div>
  <div class="slide" data-slide-id="9">
    <span class="dragHandle"></span>
    <span>9</span>
  </div>
  <div class="slide no-drag" data-slide-id="10">
    <span class="dragHandle"></span>
    <span>10</span>
  </div>
  <div class="slide no-drag" data-slide-id="11">
    <span class="dragHandle"></span>
    <span>11</span>
  </div>
</div>
<div class="blueLegend">Draggable Slides</div>
<div class="redLegend">Non-Draggable Slides</div>
<h2 class="bottomText">
The reordering implementation is based on 
<a href="https://github.com/SortableJS/Sortable" target="_blank">SortableJS/Sortable</a>
</h2>

script.js

var getOrderOfSlides = function() {
  var slides = document.querySelectorAll(".slides .slide");
  var order = [];
  Array.prototype.forEach.call(slides, function(slide) {
    order.push(slide.getAttribute("data-slide-id"));
  });
  var _cOrder = order.join(", ");
  document.getElementById("cOrder").innerHTML = _cOrder;
  return _cOrder;
};
getOrderOfSlides();
var sortableLib = document.createElement("script");
sortableLib.type = "text/javascript";
sortableLib.src =
  "//cdn.kcak11.com/Sortable/Sortable.js?req=" + new Date().getTime();
document.querySelector("head").appendChild(sortableLib);
(function(f) {
  f(f);
})(function(f) {
  if (typeof Sortable !== "undefined") {
    var el = document.querySelector(".slides");
    var sortable = new Sortable(el, {
      handle: ".dragHandle",
      draggable: ".slide:not(.no-drag)",
      onEnd: function(e) {
        getOrderOfSlides();
      },
      ghostClass: "placeHolderGhost"
    });
  } else {
    setTimeout(function() {
      f(f);
    }, 100);
  }
});

slides-drag-n-drop-example-using-sortable.markdown

Slides Drag-n-Drop Example using Sortable

Reordering via HTML5 Drag-n-Drop API

A Pen by K.C.Ashish Kumar on CodePen.

License.

style.css

body {
  font-family: Tahoma;
}
h2 {
  font-size: 14px;
}
h2.bottomText {
  margin-bottom: 100px;
}
.slides .slide {
  background-color: rgb(90, 160, 212);
  width: 150px;
  height: 150px;
  margin: 15px;
  font-family: Tahoma;
  display: inline-block;
  border: 2px solid blue;
  text-align: center;
  cursor: default;
  position: relative;
}
.slides .slide.no-drag {
  background-color: #f00;
}
.slide span:not(.dragHandle) {
  color: #fff;
  position: absolute;
  width: 50px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -25px;
}
.slide .dragHandle {
  position: absolute;
  top: -2px;
  left: 0px;
  color: #fff;
  cursor: move;
  cursor: -webkit-grabbing;
  visibility: hidden;
}
.slide:not(.no-drag):hover .dragHandle {
  visibility: visible;
}
.slide:hover .dragHandle:after {
  content: ".. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. ..";
  letter-spacing: 2px;
  line-height: 8px;
  font-weight: bold;
  background-color: #000;
  position: absolute;
  top: 2px;
  left: 0px;
  width: 20px;
  height: 150px;
  overflow: hidden;
}
.placeHolderGhost:before {
  content: " ";
  width: 1px;
  height: 150px;
  border-left: 5px solid #000;
  position: absolute;
  top: 0px;
  left: -20px;
}
.placeHolderGhost:after {
  content: "Move Here";
  color: rgb(193, 188, 174);
  line-height: 150px;
  font-family: Tahoma;
  background-color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}
.blueLegend::before,
.redLegend::before {
  content: " ";
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 5px;
  position: relative;
  top: 4px;
}
.blueLegend::before {
  background-color: rgb(90, 160, 212);
}
.redLegend::before {
  background-color: #f00;
}