Drag And Drop With Snap Into Place – Magnet.js

Category: Drag & Drop , Javascript | June 14, 2019
Author: lf2com
Views Total: 3,448
Official Page: Go to website
Last Update: June 14, 2019
License: MIT

Preview:

Drag And Drop With Snap Into Place – Magnet.js

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.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

You Might Be Interested In:


One thought on “Drag And Drop With Snap Into Place – Magnet.js

Leave a Reply