Draggable & Resizable Elements With Alignment Guides - Smart Guides

A jQuery extension to jQuery UI library for creating draggable and resizable elements with smart visual guides while dragging and resizing.

How to use it:

1. This extension requires the latest jQuery and jQuery UI libraries.

<link rel="stylesheet" href="/path/to/cdn/jquery-ui.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>

2. Load the Smart Guides plugin and other resources in the document.

• smart-guides: Required
• multi-draggable.js: jQuery UI draggable for all selected elements
• resizable.snap.ext.js: jQuery UI Resizable Snap extension

<!-- Required -->
<link rel="stylesheet" href="smart-guides.css" />
<script src="smart-guides.js"></script>
<script src="jquery.draggable.smartguides.js"></script>
<script src="jquery.resizable.smartguides.js"></script>

<!-- Optional -->
<link rel="stylesheet" href="jquery.multi-draggable.css" />
<script src="jquery.multi-draggable.js"></script>
<script src="jquery.ui.resizable.snap.ext.js"></script>

3. Append smart guides to draggable and resizable elements:

var opts = {
    containment: "parent",
    smartGuides: true,  
    appendGuideTo: '.drag:not(".selected")',  
    snapTolerance: 10,
    beforeStart: function () {
      var $this = $(this);
      if (!$this.hasClass('selected')) {
        $this.siblings('.selected').removeClass('selected');
        $this.addClass('selected');
      }
    }
};
$('.myElement')
  .draggable(opts)
  .resizable($.extend({ handles: 'all' }, opts));

4. With the Multidraggable jQuery plugin:

var opts = {
    containment: "parent",
    smartGuides: true,
    appendGuideTo: '.drag:not(".selected")'
    snapTolerance: 10,
    beforeStart: function () {
      var $this = $(this);
      if (!$this.hasClass('selected')) {
        $this.siblings('.selected').removeClass('selected');
        $this.addClass('selected');
      }
    }
};
$('.myElement')
  .draggable($.extend({
    multiple: true,
    selected: '.selected'
  }, opts))
  .resizable($.extend({ handles: 'all' }, opts ));

5. With the Resizable Snap extension:

var opts = {
    containment: "parent",
    smartGuides: true,
    appendGuideTo: '.drag:not(".selected")'
    guideClass: 'guide',
    snap: '.snap-container',
    snapTolerance: 10,
    beforeStart: function () {
      var $this = $(this);
      if (!$this.hasClass('selected')) {
          $this.siblings('.selected').removeClass('selected');
          $this.addClass('selected');
      }
    }
};
$('.myElement')
  .draggable(opts)
  .resizable($.extend({ handles: 'all' }, opts ));

---

This awesome jQuery plugin is developed by aichukanov. For more Advanced Usages, please check the demo page or visit the official website.