0

packery を使用して、水平スクロール、ドラッグ可能/並べ替え可能なリストを作成しようとしています。

基本的に、このコードペンの水平バージョンを作成したい: http://codepen.io/desandro/pen/cbhDG

私はそれを変更しようとしましたが、問題なくスクロールバーを使用して水平方向のリストを取得できます。問題は、packery を適用するとすぐに、セルを垂直方向にラップしたいので、オーバーフローを削除するように見えることです。方法が見つかりません。パッカリーコンテナのサイズを制御する

ここに私の試みがあります： 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 );
    }

  });

});

どんな助けでも大歓迎です。乾杯。

4

1 に答える 1

1

確実なこと！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 );
}
于 2014-12-01T12:53:01.067 に答える