我正在尝试使用 packery 编写一个水平滚动、可拖动/可排序的列表。
基本上我想制作这个codepen的水平版本:http: //codepen.io/desandro/pen/cbhDG
我试图修改它,并且可以得到一个带有滚动条的水平列表没问题,问题是一旦我应用包装它想要垂直包裹单元格并且它似乎消除了溢出,我找不到方法控制包装容器的大小
到目前为止,这是我的尝试:http: //codepen.io/anon/pen/dPYXJG
哈姆:
%div.all-slides
%div.slides
- (1..12).each do |i|
%div.slide
%div#cloned-slides.cloned-slides
CSS:
html, body {
height: 100%;
width:100%;
overflow: hidden;
background: #8D939D;
margin: 0;
}
.all-slides {
width: 100%;
height: 120px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
padding: 1rem;
background-color: #ccc;
}
.slide {
display:inline-block;
width: 100px;
height: 60px;
background: green;
position: relative;
margin:3px;
z-index: 5;
user-select: none;
}
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 );
}
});
});
任何帮助将不胜感激。干杯。