[英]Packery horizontal scrolling layout issue
我正在嘗試使用包裝廠編寫一個水平滾動,可拖動/可排序的列表。
基本上,我想制作此Codepen的橫向版本: http ://codepen.io/desandro/pen/cbhDG
我試圖對其進行修改,並且可以使用滾動條獲得一個水平列表,這沒問題,問題在於,一旦我應用包裝紙,它就想將電池垂直向下包裝,似乎可以消除溢出,我找不到辦法控制包裝容器的尺寸
到目前為止,這是我的嘗試: http : //codepen.io/anon/pen/dPYXJG
HAML:
%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 );
}
});
});
任何幫助將不勝感激。 干杯。
當然可以! http://codepen.io/desandro/pen/ByoQwN
我將Packery選項的rowHeight:slldeSize.outerWidth更改為columnWidth:slideSize.outerHeight,並將Draggabilly選項的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 );
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.