Drag And Drop With Snap Into Place – Magnet.js

Preview:

Description:

Magnet.js is a small and standalone JavaScript library that provides drag and drop with snap into place functionality for single or grouped elements.

How to use it:

Install the Magnet.js via NPM:

# NPM
$ npm install magnet --save

Initialize the Magnet.js library.

let magnet = new Magnet();

Add elements which should be draggable.

<div class="magnet">
  ...
</div>

magnet.add(document.querySelectorAll('.magnet'));

Set the attract distance in pixels.

magnet.distance(30);
magnet.distance(30); // get

Enable/disable alignment types.

magnet.enabledAlignOuter(true);
magnet.enabledAlignInner(true); 
magnet.enabledAlignCenter(true);
magnet.enabledAlignParentCenter(false);
magnet.enabledAlignOuter();

If you want to keep the draggable element in the parent element.

magnet.stayInParentEdge(true);

Remove elements.

magnet.remove(document.querySelector('.magnet'));
magnet.removeFull(document.querySelector('.magnet'))

Enable/disable attractable between group members.

magnet.attractable(true);
magnet.attractable(); // get

Set Rectangle Position.

magnet.setMemberRectangle(elem, rect);

Enable/disable Ctrl key.

magnet.allowCtrlKey(true);
magnet.allowCtrlKey(); // get

Clear the element group.

magnet.clear();
magnet.clearFull();

Event handlers.

magnet.on('magnetenter', function(e) {
  console.log('magnetenter', e.detail); 
});
magnet.on('magnetleave', function(e) {
  console.log('magnetleave');
});
magnet.off('magnetenter magnetleave');
elem.addEventListener('attract', function(e) {
  console.log('attract', e.detail); 
});
elem.addEventListener('unattract', function(e) {
  console.log('unattract');
});
elem.addEventListener('attracted', function(e) {
  console.log('attracted', e.detail); 
});
elem.addEventListener('unattracted', function(e) {
  console.log('unattracted');
});

Changelog:

v1.0.8 (04/05/2020)

• Removed debug log

v1.0.7 (01/01/2020)

• Fixed a critical issue that causes reference error

v1.0.6 (01/01/2020)

• Fixed some functions did not return response values in jQuery plugin

v1.0.5 (06/14/2019)

• Supported to set enabled of allowing to drag elements
• Supported for switch unit between relative and absolute
• Added function to set rectangle of element
• Remove mouseleave event from triggering end event of magnet group

v1.0.4 (06/10/2019)

• Added before/after/do attract functions
• Added start/end/move of attract events

v1.0.3 (06/09/2019)

• Added function to check and move the magnet member with new rectangle info
• Added an arrow demo that could move focused block with arrow keys

v1.0.2 (06/09/2019)

• Added function for aligning to parent x/y center
• Added function to set attractable of magnet group
• Added function that could allow/disallow ctrl key to unattract members

07/03/2018

• Sync methods: stayInParentEdge and stayInParentElem

06/02/2018

• Fixed remove function