After adding the Divs to magnet the original position changed , trying the to assign them with a reverse method like #22
but the same thing happens again
const magnet = new Magnet();
magnet.distance(50);
magnet.attractable(true);
magnet.allowCtrlKey(true);
magnet.allowDrag(true); // set to allow drag, return this
magnet.alignOuter(true); // set: align to element outside edges, return this
magnet.alignInner(true); // set: align to element inside edges, return this
magnet.alignCenter(true); // set: align to element middle line, return this
magnet.alignParentCenter(true)
var AllPlugins = Array.from(document.getElementById("page-area").children)
// AllPlugins = AllPlugins.reverse()
AllPlugins.forEach(plugin => {
['attract', 'unattract', 'attracted', 'unattracted'].forEach((type) => {
plugin.addEventListener(type, function(e) {
console.log(e.type, e);
});
});
magnet.add(plugin)
});
let domMask = document.getElementById('lines');
let domHoriMagnet = domMask.querySelector('.hori');
let domVertMagnet = domMask.querySelector('.vert');
magnet.on('start change end', ({ type }) => {
console.log(`magnet${type}`);
}).on('end', () => {
domHoriMagnet.classList.remove('show');
domVertMagnet.classList.remove('show');
}).on('change', (e) => {
// show/hide horizon/vertical edge line
let result = e.detail;
let resultX = result.x;
let resultY = result.y;
if (resultX) {
domVertMagnet.style.left = (resultX.position+'px');
domVertMagnet.classList.add('show');
} else {
domVertMagnet.classList.remove('show');
}
if (resultY) {
domHoriMagnet.style.top = (resultY.position+'px');
domHoriMagnet.classList.add('show');
} else {
domHoriMagnet.classList.remove('show');
}
});
After adding the Divs to magnet the original position changed , trying the to assign them with a reverse method like #22
but the same thing happens again