Add Adjustable Spacers To Elements Via Drag – spacers.js

Preview:

Description:

spacers.js is a JavaScript library for applying multiple adjustable spacers with or without padding & margin to block elements.

It offers a convenient way to add additional white space between two UI components in your app. You can adjust the size and direction of spacers with drag and drop.

How to use it:

1. Load the stylesheet spacers.css and JavaScript spacers.js in the document.

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

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

<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 to only show the spacers on hover. Default: false.

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

5. Determine at which position the library appends the spacer HTML. Can be either ‘begin’ or ‘end’. Default: null.

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

6. Determine whether to hide the margin/padding values in the spacer. Default: false.

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

7. Determine whether to show the spacer label. Default: false.

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

8. Determine whether to lock opposite spacers. Default: false.

spacers({
  element: '.block',
  enableLock: true,
  lockIcon: '🔒'
  unlockIcon: '🔓'
})

9. Apply additional CSS classes to the spacers.

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

10. Specify the container area.

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

11. Trigger a function when drag ends.

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

Changelog:

08/05/2021

• code formatting