I have a set if divs that I wish to add to Magnet. These divs have styles that place them in a position on the page, so top, left an such. As soon as I add them to Magnet, they get squashed together. What I mean is they are taken out of their place and moved to different positions. Am I doing something wrong? The following is the code:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="/Content/jquery/jquery-1.10.2.js"></script>
<link href="/Content/jquery/jqueryUI/jquery-ui.css" rel="stylesheet" />
<script src="/Content/jquery/jqueryUI/jquery-ui.js"></script>
<script src="/Content/plugins/magnet/jquery-magnet.min.js"></script>
<style type="text/css">
#snapLines {
z-index: 1;
pointer-events: none;
position: fixed;
background-color: #FFF;
z-index: 0;
width: 1911px; /*temporary*/
height: 1000px; /*temporary*/
}
#snapLines, #paper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#snapLines > * {
position: absolute;
width: 1px;
height: 1px;
background-color: #CCC;
opacity: 0;
/*border: #CCC 1px dashed*/;
}
#snapLines .ppVertical {
transform: translateX(-50%);
height: 100%;
}
#snapLines > .show {
opacity: .8;
}
#snapLines .ppHorizontal {
transform: translateY(-50%);
width: 100%;
}
.divContent {
width: 100%;
height: 100%;
}
#notifications {
width: 500px;
height: 300px;
background-color: aliceblue;
position: relative;
top: 350px
}
</style>
<script type="text/javascript">
$(document).ready(function (e) {
var options = {
distance: 50,
attractable: true,
allowCtrlKey: true, // to not snap
allowDrag: true,
useRelativeUnit: false,
stayInParent: false,
alignOuter: true,
alignInner: true,
alignCenter: true,
alignParentCenter: true
}
let domMask = document.getElementById('snapLines');
let domHoriMagnet = domMask.querySelector('.ppHorizontal');
let domVertMagnet = domMask.querySelector('.ppVertical');
let $magnet = $.magnet();
$.each($('.magnettt'), function (idx, el) {
$magnet.add(el);
});
$magnet
.on('magnetstart', function (e) {
console.log('magnetstart');
})
.on('magnetend', () => {
console.log('magnetend');
domHoriMagnet.classList.remove('show');
domVertMagnet.classList.remove('show');
})
.on('magnetchange', (e) => {
let result = e.detail;
console.log('magnetchange', result);
domHoriMagnet.classList.remove('show');
domVertMagnet.classList.remove('show');
let resultX = result.x;
let resultY = result.y;
if (resultX) {
domVertMagnet.style.left = (resultX.position + 'px');
domVertMagnet.classList.add('show');
}
if (resultY) {
domHoriMagnet.style.top = (resultY.position + 'px');
domHoriMagnet.classList.add('show');
}
})
.on('mousemove', function (e) {
console.log('ousemove');
});
})
</script>
</head>
<body>
<div id="snapLines">
<span class="ppHorizontal" style="top: 233px;"></span>
<span class="ppVertical" style="left: 245px;"></span>
</div>
<div class="magnettt" data-SnapTo="true" id="d1F" style="width: 40px;height: 40px;background-color: #ffd800;border: 1px #cccccc solid;top: 10px;left: 100px;position: relative">
<div class="divContent">d1F</div>
</div>
<div class="magnettt" data-SnapTo="true" id="d2F" style="width: 60px;height: 60px;background-color: aqua;border: 1px #cccccc solid;top: 40px;left: 200px;position: relative">
<div class="divContent">d2F</div>
</div>
<div class="magnettt" data-SnapTo="true" id="d3F" style="width: 40px;height: 60px;background-color: bisque;border: 1px #cccccc solid;top: 70px;left: 150px;position: relative">
<div class="divContent">d3F</div>
</div>
<div class="magnettt" data-SnapTo="true" id="d4F" style="width: 90px;height: 60px;background-color: cadetblue;border: 1px #cccccc solid;top: 100px;left: 100px;position: relative">
<div class="divContent">d4F</div>
</div>
<a href="javascript:$('#notifications').html('');" style="position:relative;top:345px">Clear Notifications</a>
<div id="notifications" style="overflow:scroll"></div>
</body>
</html>
Good morning,
I have a set if divs that I wish to add to Magnet. These divs have styles that place them in a position on the page, so top, left an such. As soon as I add them to Magnet, they get squashed together. What I mean is they are taken out of their place and moved to different positions. Am I doing something wrong? The following is the code: