Question

这是我的代码：

＆＃13;

.item {
  display:inline-block;
  width:120px;
  height:120px;
  border:1px solid red;
}

＆＃13;

<div id="listing">
  <div data-value="5" class="item">item 5</div>
  <div data-value="3" class="item">item 3</div>
  <div data-value="2" class="item">item 2</div>
  <div data-value="1" class="item">item 1</div>
  <div data-value="4" class="item">item 4</div>
</div>

＆＃13;

我想根据div属性的值对data-value进行排序，但我想显示使用动画重新排列的项目。我怎么能这样做？

Answer 1

以下是如何为排序设置动画：

遍历所有元素并存储其位置
将元素绝对置于原始位置
获取将被替换的项目的位置，并为该位置设置动画。
（可选）动画完成后，您可能希望按排序顺序将常定项目换出绝对定位的项目，因此元素的DOM顺序是正确的。

function animateSort(parent, child, sortAttribute) {
  var promises = [];
  var positions = [];
  var originals = $(parent).find(child);
  var sorted = originals.toArray().sort(function(a, b) {
    return $(a).attr(sortAttribute) > $(b).attr(sortAttribute);
  });

  originals.each(function() {
    //store original positions
    positions.push($(this).position());
  }).each(function(originalIndex) {
    //change items to absolute position
    var $this = $(this);
    var newIndex = sorted.indexOf(this);
    sorted[newIndex] = $this.clone(); //copy the original item before messing with its positioning
    $this.css("position", "absolute").css("top", positions[originalIndex].top + "px").css("left", positions[originalIndex].left + "px");

    //animate to the new position
    var promise = $this.animate({
      top: positions[newIndex].top + "px",
      left: positions[newIndex].left + "px"
    }, 1000);
    promises.push(promise);
  });

  //instead of leaving the items out-of-order and positioned, replace them in sorted order
  $.when.apply($, promises).done(function() {
    originals.each(function(index) {
      $(this).replaceWith(sorted[index]);
    });
  });
}

$(function() {
  $("input").click(function() {
    animateSort("#listing", "div", "data-value");
  });
});

.item {
  display: inline-block;
  width: 120px;
  height: 120px;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="Sort" />
<div id="listing">
  <div data-value="5" class="item">item 5</div>
  <div data-value="3" class="item">item 3</div>
  <div data-value="2" class="item">item 2</div>
  <div data-value="1" class="item">item 1</div>
  <div data-value="4" class="item">item 4</div>
</div>

Answer 2

虽然您可以在没有jquery的情况下轻松完成此操作，但这是一种（非动画）方式对它们进行排序：

var sorted = $('#listing div').sort(function(a,b) {
   return $(a).data('value') - $(b).data('value');
});

$('#listing').html(sorted);

https://jsfiddle.net/yne89aw4/

我会看到我可以做些关于动画排序的方法

如何显示通过动画排序的HTML元素

2 个答案: