How to Add Adjustable Spacers To Elements Via Drag | spacers.js

spacers.js is a JavaScript library for implementing multiple adjustable spacers with or without padding and margin to prevent elements.

Provides a convenient way to add extra white space between two UI components in your app. You can adjust the size and orientation of the separators by dragging and dropping them.

Check Here – Lightweight UI Components for Vue.js Based on Bulma | Buefy

How to make use of it:

1. Load the stylesheet spacers.css and JavaScript spacers.js within the doc.

<link rel="stylesheet" href="spacers/spacers.css" />
<script src="spacers/spacers.js"></script>

2. Apply spacers to a given aspect and override the default spacing (in px) if wanted.

<div class="block">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, eveniet laudantium, sit soluta ipsum
  reprehenderit libero eaque ex, unde nesciunt blanditiis itaque nemo exercitationem voluptates modi
  et cumque quas. Aliquid.
</div>
spacers({
  element: '.block',
  defaultSpacing: '8', // default: 8
  spacingUnit: 'px', // em, rem, in, cm, ch, mm, pt, pc ..etc
})

3. Enable/disable padding & margin.

spacers({
  element: '.block',
  padding: true,
  margin: true,
  defaultPadding: {
   'top': '20',
   'bottom': '20',
   'left': '20',
   'right': '20'
  }
  defaultMargin: {
   'top': '10',
   'bottom': '10',
   'left': '10',
   'right': '10'
  }
})

4. Determine whether or not to solely present the spacers on hover.

spacers({
  element: '.block',
  showOnHover: true,
})

5. Determine at which place the library appends the spacer HTML.

spacers({
  element: '.block',
  appendHtml: 'begin',
})

6. Determine whether or not to cover the margin/padding values within the spacer.

spacers({
  element: '.block',
  hideSpacingValue: true,
})

7. Determine whether or not to indicate the spacer label.

spacers({
  element: '.block',
  showLabel: 'Spacer Label',
})

8. Determine whether or not to lock reverse spacers.

spacers({
  element: '.block',
  enableLock: true,
  lockIcon: 'šŸ”’'
  unlockIcon: 'šŸ”“'
})

9. Apply extra CSS classes to the spacers.

spacers({
  element: '.block',
  spacerClass: 'my-class'
})

10. Specify the container area.

spacers({
  element: '.block',
  containedArea: document
})

11. Trigger a performance when the drag ends.

spacers({
  element: '.block',
  onDragEnd: function( data ) {
    console.log(data);
  }
})

Settings

OptionTypeDefaultDescription
elementstringnullSelector on which the spacer has to be initialized
appendHtmlstringbeginTo append spacer divs after or before the specifiedĀ element. UseĀ beginĀ to append before the selector andĀ endĀ to append after the selector.
paddingbooleantrueTo enable padding, which is the default behavior
marginbooleanfalseTo enable margin
onDragEndbooleannullFunction for using the spacer values when drag is ended
containedAreaobject (DOM node or jQuery object) or window.documentUse if you’re not able to find the element (ex- when using iframe)Ā 
spacerClassobjectnullFor adding custom classes in the spacers
defaultSpacingstring8Initial starting spacer height.
defaultPaddingobjectnullan object with initial padding spacer top, bottom, left right values. Overwrites the defaultSpacingĀ parameter
defaultMarginobjectnullan object with initial margin spacer top, bottom, left right values. Overwrites the defaultSpacingĀ parameter
spacingUnitstringpxChange the default spacing unit of spacers like em, rem, in, cm ..etc
showOnHoverstringfalseShow spacers only on hover
hideSpacingValuebooleanfalseHides the margin/padding values at the center of the spacer
showLabelstringnullEnable and set the label to the specified string beside the spacing value
enableLockbooleanfalseLink opposite spacers
lockIconstring<span class="lock"></span>HTML string for the lock icon
unlockIconstring<span class="unlock"></span>HTML string for the unlock icon

Add Adjustable Spacers To Elements Via Drag, spacers Plugin/Github, html spacer line

Read More –Ā 

Simple DOM Elements Binding Tool Plugin | Necktie
jQuery Plugin Form Elements In-place/Inline Editing | TM-Editable


See Demo And Download

Official Website(actuallyakash): Click Here

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

Share