使用querySelectorAll移动多个div

Question

我正在尝试使用queryselectorall能够移动多个div，但我因为不知道如何适应而遇到麻烦。我想过使用那种风格：

[].forEach.call(els, function(el) { ... });

但是没有成功，如何修复我的脚本才能使其正常工作？

我的代码：

var draggableEl = document.querySelectorAll('[data-drag]'), 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) {
    var el = draggableEl;
    el.style.transform = 'translate(' + Math.round(x, 10) + 'px, ' + Math.round(y, 10) + 'px) translateZ(0)';
    el.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 = 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);


}

$(draggableEl).on('touchstart mousedown', onTouchStart).on('touchmove drag', move).on('touchend mouseup', onTouchEnd);
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
    };
}
function onTouchEnd(event) {
    var el = draggableEl, rect = el.getBoundingClientRect(), width = $('body').width(), halfScreen = width / 2;
    if (!$(el).hasClass('overlap')) {
        $('body').removeClass('moving touching');
        magnet.style.marginBottom = magnet.style.marginLeft = '0px';
        var x = rect.left + rect.width / 2 < halfScreen ? +10 : width - 10 - rect.width;
        $(el).addClass('edge');
        moveToPos(x, rect.top);
        setTimeout(function () {
            $(el).removeClass('edge');
        }, 500);
    }
}

来源：http://jsfiddle.net/4yt1roa6/