Press "Enter" to skip to content

Smart Guides for Draggable & Resizable Elements jQueryUI

jQueryUI smart guides for drag-and-drop objects. jQuery extension to the jQuery UI library to create drag and resize elements using smart visual guides while dragging and resizing.

indesign smart guides, smart guides indesign shortcut, smart guides indesign greyed out, smart guides disappeared indesign, indesign make guides from shape

How to make use of it:

1. This extension requires the newest 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 different sources within the doc.

<!-- 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 good guides to draggable and resizable components:

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 ));

Draggable & Resizable Elements With Alignment Guides, Smart guides Plugin/Github, indesign guides not showing


See Demo And Download

Official Website(aichukanov): Click Here

This superior jQuery/javascript plugin is developed by aichukanov. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *