7

これは私のコードペンです: http://codepen.io/helloworld/pen/JoKmQr

サーバーからデータの配列を取得すると仮定しましょう。データにはタイトルと注文番号があります。

orderNumber が 1 から 5 までの 5 つの配列項目があります。

ここで、各 div が packery レイアウト システムの特定の場所に配置される 5 つの div をレイアウトしたいと考えています。

この画像を参照してください。

ここに画像の説明を入力

色は重要ではありません。重要なのは、順序番号に応じた div の順序です。

orderNumber の流れは、上から下へ、左から右へと進みます。

質問:

レイアウト システムで div の順序を決定するにはどうすればよいですか? 必要なフローに自動的にレイアウトされますか? または、手動で注文することについてのヒントも問題ありません:-)

HTML

<h1>Packery demo - Draggabilly</h1>
<div class="packery js-packery" data-packery-options='{ "isHorizontal": true }'>
  <div class="item w1"></div>
  <div class="item h4"></div>
  <div class="item w2"></div>
  <div class="item w3"></div>
  <div class="item h2"></div>
</div>

CSS

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body { font-family: sans-serif; }

.packery {
  background: #FDD;
  background: hsla(45, 100%, 40%, 0.2);
  counter-reset: item;
  height: 400px;
}

/* clearfix */
.packery:after {
  content: ' ';
  display: block;
  clear: both;
}

.item {
  width: 80px;
  height: 80px;
  float: left;
  border: 4px solid #333;
  border-color: hsla(0, 0%, 0%, 0.3);
}

.item:hover {
  border-color: white;
  cursor: move;
}

.item.w1 { width:   80px; background:green; }
.item.w2 { width:   80px; background:blue; }
.item.w3 { width:   80px; background:yellow; }
.item.h2 { height:  80px; background:red; }
.item.h4 { height: 160px; width:80px; background:orange;}

.item:before {
  counter-increment: item;
  content: counter(item);
  display: block;
  color: white;
  padding-top: 0.2em;
  text-align: center;
  font-size: 18px;
}

.item.is-dragging,
.item.is-positioning-post-drag {
  border-color: white;
  background: #09F;
  z-index: 2;
}

JS

// external js
// http://packery.metafizzy.co/packery.pkgd.js
// http://draggabilly.desandro.com/draggabilly.pkgd.js

$( function() {

  var $container = $('.packery').packery({
    columnWidth: 80,
    rowHeight: 80
  });

  $container.find('.item').each( function( i, itemElem ) {
    // make element draggable with Draggabilly
    var draggie = new Draggabilly( itemElem );
    // bind Draggabilly events to Packery
    $container.packery( 'bindDraggabillyEvents', draggie );
  });

});
4

1 に答える 1

7

packery が要素に与えるインデックスを取得するには、「getItemElements」を呼び出して各要素の正確なインデックスを取得する必要があります。その理由は、packery が独自のインデックスを保持している DOM 上のアイテムを実際に並べ替えないためです。

この問題を解決した方法は次のとおりです。

var $itemElems = $($container.packery('getItemElements'));

orderItems = function() {
var itemElems = $($container.packery('getItemElements'));
$(itemElems).each(function(i, itemElem) {
$(itemElem).attr('data-module-index', i); 
// adds a data attribute called data-module-index to the element and makes the value its actual index.
                });
            };
orderItems();

したがって、アイテムを再レイアウトするときは、packeryが上記の関数で指定した要素と同じインデックス順序を保存/使用してください

于 2014-12-29T18:47:53.053 に答える