Hello, this is not really an issue, more a problem of understanding what I've done wrong (if that is okay to ask).
This is my HTML document:
<!DOCTYPE html>
<html>
<head>
<style>
#testar {
width: 500px;
height: 500px;
}
#lul {
width: 200px;
height: 200px;
background-color: #000;
}
</style>
<!--Script-->
<script src="magnet.min.js"></script>
<script src= "lib/event-handler.js"></script>
<script src="function.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<title>Magnet</title>
</head>
<body>
<div id="container">
<div id="testar">
<div id="lul" class="magnet"></div>
</div>
</div>
</body>
</html>
And this is mu JS:
let magnet = new Magnet();
magnet.add(document.querySelectorAll('.magnet'));
magnet.distance(30);
magnet.enabledAlignOuter(true);
magnet.enabledAlignInner(true);
magnet.enabledAlignCenter(true);
magnet.stayInParentEdge(true);
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');
});
Are you able to help me with what I've done wrong?
Hello, this is not really an issue, more a problem of understanding what I've done wrong (if that is okay to ask).
This is my HTML document:
And this is mu JS:
Are you able to help me with what I've done wrong?