Adapt function to queryselectorall

Question

Adapt function to queryselectorall

Navigation

#1 by (2 votes)

1

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).

See:

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);
});

It returns me: Uncaught TypeError: undefined is not a function in:

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

Complete code: jsfiddle.net/4yt1roa6

javascript jquery

asked by anonymous 22.01.2015 / 22:06

1 answer

Signing documents with digital certificate using php or js Add AndEngine as a library for my project in Android Studio

score 2 · Accepted Answer

Analyzing the first line:

function move(event) {
    var el = draggableEl,

And knowing that you used to var draggableEl = document.querySelector('[data-drag]') gives me an idea that this function was fetching draggableEl to the outer scope, and it worked because you only had one element. This is not good practice, it is best to have everything within the function.

Starting from the principle that this function is run by an event handler then this will be the element you want and so you can use:

function move(event){
    var el = this,

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

Test like this:

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

In this way jQuery will fetch all elements that have a '[data-drag]' property and tie them to event droppers. When one of these functions runs the element will be passed as this and then you can use it as var el = this .