I have a script that allows you to click and drag an element across the screen and take you to the bottom 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 running of the script by moving the dragged element away from the mouse and disrupting touchend detection at the bottom of the page.
The div can not be removed. How do I compensate for the position of the element I'm 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
};
}