[英]Packery horizontal scrolling layout issue
I am trying to write a horizontally scrolling, draggable/sortable list using packery. 我正在尝试使用包装厂编写一个水平滚动,可拖动/可排序的列表。
Basically I want to make a horizontal version of this codepen: http://codepen.io/desandro/pen/cbhDG 基本上,我想制作此Codepen的横向版本: http ://codepen.io/desandro/pen/cbhDG
I have tried to modify it, and can get a horizontal list with scrollbar going no problem, the trouble is that as soon as i apply packery it wants to wrap the cells down vertically and it seems to remove the overflow, i cant find a way to control the size of the packery container 我试图对其进行修改,并且可以使用滚动条获得一个水平列表,这没问题,问题在于,一旦我应用包装纸,它就想将电池垂直向下包装,似乎可以消除溢出,我找不到办法控制包装容器的尺寸
here is my attempt so far: http://codepen.io/anon/pen/dPYXJG 到目前为止,这是我的尝试: http : //codepen.io/anon/pen/dPYXJG
haml: HAML:
%div.all-slides
%div.slides
- (1..12).each do |i|
%div.slide
%div#cloned-slides.cloned-slides
css: 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: 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 );
}
});
});
any help would be greatly appreciated. 任何帮助将不胜感激。 cheers. 干杯。
Sure thing! 当然可以! http://codepen.io/desandro/pen/ByoQwN http://codepen.io/desandro/pen/ByoQwN
I changed Packery option rowHeight: slldeSize.outerWidth to columnWidth: slideSize.outerHeight, and Draggabilly option axis: 'y' to axis:'x'. 我将Packery选项的rowHeight:slldeSize.outerWidth更改为columnWidth:slideSize.outerHeight,并将Draggabilly选项的axis:'y'更改为axis:'x'。 Everything else is handled with CSS. 其他所有内容都由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.