Javascript 封隔器水平滚动布局问题

我正在尝试使用Packy编写一个水平滚动、可拖动/可排序的列表

基本上，我想制作这个代码笔的水平版本：

我已经尝试过修改它，并且可以得到一个滚动条运行的水平列表没有问题，问题是，只要我应用Pacery，它就想垂直地包装单元格，似乎可以消除溢出，我找不到控制Pacery容器大小的方法

以下是我迄今为止的尝试：

哈默：

css:

javascript:

docReady( function() {

  var slidesElem = document.querySelector('.slides');
  var slideSize = getSize( document.querySelector('.slide') );
  var pckry = new Packery( slidesElem, {
        columnWidth : slideSize.outerWidth,
                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: 'x'
    });
    // 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 ];
    if ( nextItem ) {
      slidesElem.insertBefore( draggedItem.element, nextItem.element );
    } else {
      slidesElem.appendChild( draggedItem.element );
    }

  });

});

docReady（函数（）{
var slidesElem=document.querySelector（'.slides'）；
var slideSize=getSize（document.querySelector（'.slide'）；
var pckry=新封隔器（滑动元件{
columnWidth:slideSize.outerWidth，
行高：slideSize.outerHeight
});
//获取项目元素
var itemElems=pckry.getItemElements（）；
//对于每个项目。。。
对于（变量i=0，len=itemElems.length；i

任何帮助都将不胜感激。 干杯。

当然

我将封隔器选项rowHeight:slldeSize.outerWidth更改为columnWidth:slideSize.outerHeight，并将可拖动选项axis:'y'更改为axis:'x'。其他一切都是用CSS处理的

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

var slidesElem=document.querySelector（'.slides'）；
var slideSize=getSize（document.querySelector（'.slide'）；
var pckry=新封隔器（滑动元件{
行高：slideSize.outerHeight
});
//获取项目元素
var itemElems=pckry.getItemElements（）；
//对于每个项目。。。
对于（变量i=0，len=itemElems.length；i

非常感谢，事实上我曾经尝试过，但没有得到任何回报，但看着你的代码，我意识到我忘了设置宽度。幻灯片为我解决了这个问题：）

docReady( function() {

  var slidesElem = document.querySelector('.slides');
  var slideSize = getSize( document.querySelector('.slide') );
  var pckry = new Packery( slidesElem, {
        columnWidth : slideSize.outerWidth,
                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: 'x'
    });
    // 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 ];
    if ( nextItem ) {
      slidesElem.insertBefore( draggedItem.element, nextItem.element );
    } else {
      slidesElem.appendChild( draggedItem.element );
    }

  });

});

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