2
I have a script that allows you to click and drag an element through the screen and take it to the footer of the page, which has an area that attracts the dragged element.
At the top of the page is a div with CSS:
width: 100%;
height: 55px;`.
And it completely interferes with the operation of the script, moving the dragged element away from the mouse and disturbing the detection of touchend at the bottom of the page.
The div cannot be removed. How do I compensate for the position of the element I am dragging?
HTML:
<div style="width: 100%; height: 55px;"></div>
<div data-drag="0" class="thing">
<div class="circle"></div>
</div>
<div class="magnet-zone">
<div class="magnet"></div>
</div>
JS:
var magnet = document.querySelector('.magnet-zone');
function isOverlapping(el1, el2) {
var rect1 = el1.getBoundingClientRect(),
rect2 = el2.getBoundingClientRect();
return !(rect1.top > rect2.bottom || rect1.right < rect2.left || rect1.bottom < rect2.top || rect1.left > rect2.right);
}
function moveToPos(x, y, here) {
here.style.transform = 'translate(' + Math.round(x, 10) + 'px, ' + Math.round(y, 10) + 'px) translateZ(0)';
here.style.webkitTransform = 'translate(' + Math.round(x, 10) + 'px, ' + Math.round(y, 10) + 'px) translateZ(0)';
}
function moveMagnet(x, y) {
var dist = 12,
width = $('body').width() / 2,
height = $('body').height(),
direction = x > width ? 1 : -1,
percX = x > width ? (x - width) / width : -(width - x) / width,
percY = Math.min(1, (height - y) / (height / 2));
magnet.style.marginLeft = Math.round(dist / 1.5 * percX) + 'px';
magnet.style.marginBottom = Math.round(dist * percY) + 'px';
}
function move(event) {
var el = this,
magnetRect = magnet.getBoundingClientRect(),
elRect = el.getBoundingClientRect();
x = this._posOrigin.x + event.pageX - this._touchOrigin.x;
y = this._posOrigin.y + event.pageY - this._touchOrigin.y;
moveMagnet(x + elRect.width / 2, y + elRect.height / 2);
$('body').addClass('moving');
var touchPos = {
top: y,
right: x + elRect.width,
bottom: y + elRect.height,
left: x
};
overlapping = !(touchPos.top > magnetRect.bottom || touchPos.right < magnetRect.left || touchPos.bottom < magnetRect.top || touchPos.left > magnetRect.right);
if (overlapping) {
var mx = magnetRect.width / 2 + magnetRect.left;
var my = magnetRect.height / 2 + magnetRect.top;
x = mx - elRect.width / 2;
y = my - elRect.height / 2;
if (!$(el).hasClass('overlap')) {
$(el).addClass('transition');
setTimeout(function () {
$(el).removeClass('transition');
}, 150);
setTimeout(function () {
el.remove();
setTimeout(function () {
$('body').removeClass('moving touching');
}, 900);
}, 1000);
}
magnet.className = magnet.className.replace(' overlap', '') + ' overlap';
el.className = el.className.replace(' overlap', '') + ' overlap';
} else {
if ($(el).hasClass('transition')) {
$(el).removeClass('transition');
}
if ($(el).hasClass('overlap')) {
$(el).addClass('transition');
setTimeout(function () {
$(el).removeClass('transition');
}, 100);
}
magnet.className = magnet.className.replace(' overlap', '');
el.className = el.className.replace(' overlap', '');
}
if (Math.round(x, 10) > 0 && Math.round(x, 10) < ($(window).width() - 40)) {
moveToPos(x, y, this);
} else {
if (x < ($('body').width() / 2)) {
var width = 0;
} else {
var width = ($(window).width() - 60);
}
moveToPos(width, y, this);
}
};
$('[data-drag]')
.on('touchstart mousedown', onTouchStart)
.on('touchmove drag', move);
function onTouchStart(event) {
var rect = this.getBoundingClientRect();
$('body').addClass('touching');
$(this).removeClass('edge transition');
this._touchOrigin = {
x: event.pageX,
y: event.pageY
};
this._posOrigin = {
x: rect.left,
y: rect.top
};
}