拖拽後改變DOM的順序並使用packey下降，draggabilly

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沒有按一個bug出現控制檯中的更改和錯誤。

任何想法？我真的很難找到錯誤。

我會感謝你的幫助

樣品使用：packery.metafizzy.co與draggabilly.desandro.com

來源

2014-10-17 jcdsr

請提供控制檯錯誤的說明。 – 2014-10-17 10:17:01

你並不需要更改索引，它應該只是

var nextItem = pckry.items[ index ];

draggedItem給您放置的位置索引/下一個項目的位置索引

來源

2014-10-17 10:25:43 Spokey

沒有工作。錯誤停止顯示在控制檯上，但現在DOM不移動或更改項目的位置，我希望是有道理的。 – jcdsr 2014-10-17 11:59:57

@ carlosdv4我在這裏使用它，它的工作http://codepen.io/anon/pen/jlbrA您的問題可能與其他 – Spokey 2014-10-17 12:02:19

當我在CodePen上下載你的代碼，工作正常，你可以拖放沒有問題作爲可視化，但DOM不會改變爲Desandro CodePen示例http://codepen.io/desandro/pen/cbhDG我也看到您將更改作爲以前的答案，但是這種更改會阻止DOM移動到正確的位置事實上，我建議改變像這樣的「幻燈片」的名稱http://codepen.io/carlosdv4/pen/xahAb – jcdsr 2014-10-17 12:43:48

拖拽後改變DOM的順序並使用packey下降，draggabilly

回答

相關問題