Arrastrar y soltar con encaje en su lugar-Magnet. js

Vista prévia

Descripción

Magnet. js es una biblioteca de JavaScript pequeña e independiente que proporciona arrastrar y colocar con Snap en la funcionalidad de lugar para elementos individuales o agrupados.

Funcionamiento

Instale Magnet. js a través de NPM:

# NPM
$ npm install magnet --save

Inicialice la biblioteca Magnet. js.

let magnet = new Magnet();

Añada elementos que deban arrastrarse.

<div class="magnet">

...
</div>

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

Establece la distancia de atracción en píxeles.

magnet.distance(30);

Activar/desactivar tipos de alineación.

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

Si desea mantener el elemento arrastrable en el elemento primario.

magnet.stayInParentEdge(true);

Eliminar elementos.

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

Borre el grupo de elementos.

magnet.clear();

Controladores de eventos.

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');
});

Registro de cambios

07/03/2018

• Métodos de sincronización: stayInParentEdge y stayInParentElem

06/02/2018

• Se corrigió la función remove