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

时间:2014-10-17 10:11:07

标签: javascript jquery packery

此代码存在错误

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

});

当我拖动&#34;首先&#34;项目到&#34;最后一个&#34; DOM没有变化,控制台出现错误。

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

我将非常感谢您的帮助

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

1 个答案:

答案 0 :(得分:0)

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

var nextItem = pckry.items[ index ];

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

的索引