Drag Items using Vanilla JS

by Matthew Schenker

HTML

<h3>TEST ME BELOW:</h3>

<div id="containment-wrapper">
    <div id="draggable3" class="draggable ui-widget-content">
        <p>DRAG ME</p>
    </div>
    <div id="draggable2" class="draggable ui-widget-content">
        <p>ME TOO</p>
    </div>
    <div id="draggable1" class="draggable ui-widget-content">
        <p>AND ME</p>
    </div>

CSS

.draggable {
      width: 90px;
      height: 90px;
      padding: 0.5em;
      float: left;
      margin: 0 10px 10px 0;
  }
  #draggable1 {
    border: 3px solid red;
  }
  #draggable2 {
    border: 3px solid green;
  }
#draggable3 {
    border: 3px solid blue;
  }
  #draggable, #draggable2 {
      margin-bottom:20px;
  }
  #draggable {
      cursor: n-resize;
  }
  #draggable3 {
      cursor: move;
  }
  #containment-wrapper {
      width: 700px;
      height:500px;
      border:1px solid #000;
      padding: 5px;
  }
  h3 {
      clear: left;
  }

JavaScript

var sPositions = localStorage.positions || "{}",
    positions = JSON.parse(sPositions);
$.each(positions, function (id, pos) {
    $("#" + id).css(pos)
})
$("#draggable3").draggable({
    containment: "#containment-wrapper",
    scroll: false,
    stop: function (event, ui) {
        positions[this.id] = ui.position
        localStorage.positions = JSON.stringify(positions)
    }
});
$("#draggable2").draggable({
    containment: "#containment-wrapper",
    scroll: false,
    stop: function (event, ui) {
        positions[this.id] = ui.position
        localStorage.positions = JSON.stringify(positions)
    }
});
$("#draggable1").draggable({
    containment: "#containment-wrapper",
    scroll: false,
    stop: function (event, ui) {
        positions[this.id] = ui.position
        localStorage.positions = JSON.stringify(positions)
    }
});