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