0

我在我的项目中集成了dragula，并且我需要瓷砖具有网格外观，所以我将第441行（dropTarget.insertBefore(item, reference);）更改为：

var immediateSibling = immediate.nextSibling;
parent.insertBefore(immediate, item);
parent.insertBefore(item, immediateSibling);

有关这方面的更多信息，请参见问题 #391。

无论如何，我想在拖动图块时添加动画。所以我将第 441 行修改为：

var immediateSibling = immediate.nextSibling,
itemRect = item.getBoundingClientRect(),
immediateRect = immediate.getBoundingClientRect();

parent.insertBefore(immediate, item);
parent.insertBefore(item, immediateSibling);

animate(immediate, immediateRect, itemRect);
animate(item, itemRect, immediateRect);

function animate(target, currentRect, prevRect) {
    var ms = 5000;

    target.style.transition = 'none';
    target.style.transform = 'translate3d(' + (currentRect.left - prevRect.left) + 'px,' +
        (currentRect.top - prevRect.top) + 'px, 0)';

    target.offsetWidth; // repaint

    target.style.transition = 'transform ' + ms + 'ms';
    target.style.transform = 'translate3d(0, 0, 0)';
}

当我添加动画，然后垂直拖动时，我得到一个奇怪的动画错误。这是一个解释的gif：

如何确保DOM is ChangingDOM 的每次更改都没有多个日志？

JSFiddle

以下是从第 #392 行开始的相关代码：

function drag(e) {
    if (!_mirror) {
        return;
    }
    e.preventDefault();

    var clientX = getCoord('clientX', e);
    var clientY = getCoord('clientY', e);
    var x = clientX - _offsetX;
    var y = clientY - _offsetY;

    _mirror.style.transform = 'translate3d(' + x + 'px,' + (y - (_mirror.offsetHeight * 2)) + 'px, 0)';

    var item = _copy || _item;
    var elementBehindCursor = getElementBehindPoint(_mirror, clientX, clientY);
    var dropTarget = findDropTarget(elementBehindCursor, clientX, clientY);
    var changed = dropTarget !== null && dropTarget !== _lastDropTarget;

    //if (item.style.transition === 'transform 5000ms') return;

    if (changed || dropTarget === null) {
        out();
        _lastDropTarget = dropTarget;
        over();
    }
    var parent = getParent(item);
    if (dropTarget === _source && _copy && !o.copySortSource) {
        if (parent) {
            parent.removeChild(item);
        }
        return;
    }
    var reference;
    var immediate = getImmediateChild(dropTarget, elementBehindCursor);

    if (o.revertOnSpillParent === true && immediate === parent) {
        immediate = null;
    }

    if (immediate !== null) {
        reference = getReference(dropTarget, immediate, clientX, clientY);
    }
    else if (o.revertOnSpill === true && !_copy) {
        reference = _initialSibling;
        dropTarget = _source;
    }
    else {
        if (_copy && parent) {
            parent.removeChild(item);
        }
        return;
    }
    if (
        (reference === null && changed) ||
        reference !== item &&
        reference !== nextEl(item)
    ) {
        console.log('hello');

        _currentSibling = reference;
        // save the location of next sibling of immediate
        var immediateSibling = immediate.nextSibling,
            // Save location of swapped elements
            itemRect = item.getBoundingClientRect(),
            immediateRect = immediate.getBoundingClientRect();

        parent.insertBefore(immediate, item);
        parent.insertBefore(item, immediateSibling);

        animate(immediate, immediateRect, itemRect);
        animate(item, itemRect, immediateRect);

        drake.emit('shadow', item, dropTarget, _source);
    }

    function moved(type) {
        drake.emit(type, item, _lastDropTarget, _source);
    }

    function over() {
        if (changed) {
            moved('over');
        }
    }

    function out() {
        if (_lastDropTarget) {
            moved('out');
        }
    }

    function animate(target, currentRect, prevRect) {
        var ms = 5000;

        target.style.transition = 'none';
        target.style.transform = 'translate3d(' + (currentRect.left - prevRect.left) + 'px,' +
            (currentRect.top - prevRect.top) + 'px, 0)';

        target.offsetWidth; // repaint

        target.style.transition = 'transform ' + ms + 'ms';
        target.style.transform = 'translate3d(0, 0, 0)';
    }
}
4

0 回答 0