使用 packey 和 draggabilly 拖放后更改 DOM 顺序答案

【问题标题】：Changing DOM order after drag and drop with packey and draggabilly使用 packey 和 draggabilly 拖放后更改 DOM 顺序
【发布时间】：2014-10-17 10:11:07
【问题描述】：

此代码存在错误

http://codepen.io/desandro/pen/cbhDG

docReady(function () {

    var slidesElem = document.querySelector('.slides');
    var slideSize = getSize(document.querySelector('.slide'));
    var pckry = new Packery(slidesElem, {
        rowHeight: slideSize.outerHeight
    });
    // get item elements
    var itemElems = pckry.getItemElements();
    // for each item...
    for (var i = 0, len = itemElems.length; i < len; i++) {
        var elem = itemElems[i];
        // make element draggable with Draggabilly
        var draggie = new Draggabilly(elem, {
            axis: 'y'
        });
        // bind Draggabilly events to Packery
        pckry.bindDraggabillyEvents(draggie);
    }

    // re-sort DOM after item is positioned
    pckry.on('dragItemPositioned', function (_pckry, draggedItem) {
        var index = pckry.items.indexOf(draggedItem);
        var nextItem = pckry.items[index + 1];
        slidesElem.insertBefore(draggedItem.element, nextItem.element);
    });

});

当我将“第一个”项目拖到“最后一个”时，DOM 不会改变并且控制台中会出现错误。

有什么想法吗？我真的很难找到错误。

感谢您的帮助

示例正在使用：packery.metafizzy.co 和 draggabilly.desandro.com

【问题讨论】：

请提供控制台错误的描述。

标签： javascript jquery packery

【解决方案1】：

您不需要更改索引，它应该只是

var nextItem = pckry.items[ index ];

draggedItem 给出你放置它的位置的索引/下一个项目的位置的索引

【讨论】：

没用。错误停止显示在控制台上，但现在 DOM 没有移动或更改项目位置，我希望有意义。
@carlosdv4 我在这里用过它，它可以工作codepen.io/anon/pen/jlbrA您的问题可能与其他问题有关
当我在 CodePen 上下载您的代码时，工作正常，您可以直观地拖放，但是 DOM 并没有像 Desandro CodePen 示例 codepen.io/desandro/pen/cbhDG 那样改变更改为上一个答案，但是实际上在拖动后更改会阻止 DOM 移动到正确的位置，我建议像这样更改“幻灯片”的名称codepen.io/carlosdv4/pen/xahAb