Adapt function to queryselectorall

Question

I’m trying to adapt a function that used to be used only with Queryselector, but I need to adapt it to get all the Divs (Queryselectorall).

Look at:

var draggableEl = document.querySelectorAll('[data-drag]')

The function

function move(event) {
    var el = draggableEl, 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', '');
    }
    moveToPos(x, y);


}

what defines:

[].forEach.call(draggableEl, function(el) {
$(el).on('touchstart mousedown', onTouchStart).on('touchmove drag', move(el)).on('touchend mouseup', onTouchEnd);
});

She returns to me: Uncaught Typeerror: Undefined is not a Function in:

var el = draggableEl, magnetRect = magnet.getBoundingClientRect(), elRect = el.getBoundingClientRect();

Full code: jsfiddle.net/4yt1roa6

Answer 1

Analyzing the first line:

function move(event) {
    var el = draggableEl,

and knowing that you used to var draggableEl = document.querySelector('[data-drag]') gives me the idea that that function was going to get the draggableEl to the outer scope, and it worked because you only had one element. That’s not good practice, it’s better to have everything within the function.

Assuming this function is run by an Event Handler then the this will be the element you want and so you can use:

function move(event){
    var el = this,

In addition to this syntax .on('touchmove drag', move(el)) is incorrect. So you will be running the function directly, it should be only , move).

Forehead like this:

$('[data-drag]')
    .on('touchstart mousedown', onTouchStart)
    .on('touchmove drag', move)
    .on('touchend mouseup', onTouchEnd);

This way jQuery will fetch all the elements that have a property '[data-drag]' and ties them to event headphones. When one of these runs will be passed the element as this and then you can use as I mentioned above var el = this.