7

这是我的代码笔：http: //codepen.io/helloworld/pen/JoKmQr

假设我从服务器获取了一组数据。数据有一个标题和一个订单号。

我有 5 个数组项，其中 orderNumber 从 1 到 5。

现在我想布局 5 个 div，每个 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();

因此，当您重新布局项目时，请务必保存/使用相同的索引顺序来包装包装为您提供上述功能的元素

于 2014-12-29T18:47:53.053 回答