Install: Add the line after jQueryUI.
<script type="text/javascript" src="http://plugins.meta100.com/mguides/javascripts/mGuidesUI_min.js" charset="UTF-8"></script>
Or download from https://github.com/meta100/mGuides.
Use: Adds the following options to jQueryUI draggable and resizable options (http://jqueryui.com/demos/):
guide - Default is true. Since you are loading the script it we will assume you want it to run.
guidecolor - The color of the guide lines must be an array with four colors. Default guidecolor array is [‘blue’, ‘red’, ‘green’, ‘yellow’]. First color is side guide, second is side outer padding guide, third is center align guide and fourth color is inner padding guide.
guidestyle - Default is ‘dashed’ can be any css border style
guideinner - Default false. The jQuery selector of the element you wish to have inner padding guides.
guidecenter - Default true. Set to false if you do not wish to have center guides for alignment.
guidepadding - Default 0. Set to the number of pixels you wish to have the inner and padding guides to be positioned from the edges of the elements.
snapTolerance - Default is 20. Used for the max distance from the guide the elements edge has to be for it to snap to the guide.
Example:
$(".draggable").draggable({guides: true, guidepadding: 20, guideinner: '.demo'}).resizable({handles: 'n, e, s, w', guides: true, guidepadding: 20, guideinner: '.demo'});mGuides