Drag and resize

Drag and resize

by nsatija

HTML

<link rel="stylesheet" href="mereton.com/2015b/catalog/view/theme/default/template/checkout/js/jquery-uidrag.css">
<script src="mereton.com/2015b/catalog/view/theme/default/template/checkout/js/jquery-uidrag.js"></script>
<div id="containment-wrapper">
    <div id="draggable_0" class="ui-widget-content draggable">TEST</div>
    <div id="draggable_1" class="ui-widget-content draggable">TEST</div>
</div>

CSS

.draggable {
      width: 200px;
      height: 200px;
      padding: 0.5em;
      float: left;
      margin: 0 10px 10px 0;
      cursor:move;
  }
  .draggable, a {
      cursor:move;
  }
  #draggable, #draggable2 {
      margin-bottom:20px;
      cursor:move;
  }
  #draggable {
      cursor: move;
  }
  #draggable2 {
      cursor: e-resize;
  }
  #containment-wrapper {
      width: 800px;
      height:800px;
      border:2px solid #ccc;
      padding: 10px;
      position:relative;
  }
  h3 {
      clear: left;
  }

JavaScript

var positions = JSON.parse(localStorage.positions || "{}");
var size = JSON.parse(localStorage.size || "{}");
$(function () {
    var d = $(".draggable").attr("id", function (i) {
        return "draggable_" + i
    })
    $.each(positions, function (id, pos) {
        $("#" + id).css(pos)
    })
    $.each(size, function (id, siz) {
        $("#" + id).css(siz)
    })

    d.draggable({
        containment: "#containment-wrapper",
        scroll: false,
        stop: function (event, ui) {
            positions[this.id] = ui.position
            localStorage.positions = JSON.stringify(positions)
        }
    });
    
    d.resizable({
        containment: "#containment-wrapper",
        scroll: false,
        stop: function (event, ui) {
            size[this.id] = ui.size
            localStorage.size = JSON.stringify(size)
        }
    });

});