1

Estou tentando adaptar uma função que antes era usada apenas com QuerySelector, porém preciso que adapta-la para pegar todas as divs (QuerySelectorAll).

Vejam:

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

A função

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


}

o que define:

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

Ela me retorna: Uncaught TypeError: undefined is not a function em:

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

Código completo: jsfiddle.net/4yt1roa6

1
  • 1
    Testa mudar var el = draggableEl para var el = this
    – Sergio
    Commented 22/01/2015 às 21:25

1 Resposta 1

2

Analisando a primeira linha:

function move(event) {
    var el = draggableEl,

e sabendo que antes usavas var draggableEl = document.querySelector('[data-drag]') dá-me ideia que essa funcão estava a ir buscar o draggableEl ao escopo exterior, e funcionava porque só tinhas um único elemento. Isso não é boa prática, é melhor ter tudo dentro da funcão.

Partindo do principio que essa funcão é corrida por um event handler então o this será o elemento que queres e por isso podes usar:

function move(event){
    var el = this,

Para além disso esta sintaxe .on('touchmove drag', move(el)) está incorreta. Assim vais estar a correr a funcão diretamente, deve ser somente , move).

Testa assim:

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

Deste modo o jQuery vai buscar todos os elementos que tiverem uma propriedade '[data-drag]' e amarra-lhes oscultadores de eventos. Quando uma dessas funcões correr vai ser-lhe passado o elemento como this e aí podes usar como referi em cima var el = this.

6
  • 1
    @user3163662 podes fazer um jsFiddle com o problema?
    – Sergio
    Commented 22/01/2015 às 21:51
  • 1
    Perdao foi erro de analise minha, era a funçao move() que nao sabia o que mover, adaptei e coloquei this na hora de chamar, desta forma moveToPos(x,y,this) está correto? Commented 22/01/2015 às 21:53
  • 1
    @user3163662: onde sugeres colocar move(x,y,this)? Pela a minha análize só precisas de mudar as linhas que juntei na resposta.
    – Sergio
    Commented 22/01/2015 às 21:55
  • 1
    Veja bem, moveToPos foi usado para posicionar o elemento de acordo com o drag, na funçao move() ele é executado no final, porem como na funçao ele nao especificava qual dos drags movimentar ele acabava nao movimentando nada, dai surgiu minha midificaçao Commented 22/01/2015 às 21:59
  • 1
    @user3163662 ok, nesse caso é mais correto semãnticamente usar move(x, y, el);. Pois o el é uma referência do this.
    – Sergio
    Commented 22/01/2015 às 22:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .