最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to show HTML Elements being sorted through animation - Stack Overflow

programmeradmin4浏览0评论

Here is my snippet :

.item {
  display:inline-block;
  width:120px;
  height:120px;
  border:1px solid red;
}
<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>

Here is my snippet :

.item {
  display:inline-block;
  width:120px;
  height:120px;
  border:1px solid red;
}
<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>

I would like to sort the divs based on the value of the data-value attribute, but I want to show the items being rearranged using an animation. How can I do this?

Share Improve this question edited Jul 13, 2015 at 16:27 Dave 10.9k3 gold badges44 silver badges54 bronze badges asked Jul 10, 2015 at 21:21 yarekyarek 12.1k31 gold badges130 silver badges248 bronze badges 1
  • possible duplicate of Sort Divs in Jquery Based on Attribute 'data-sort'? – Hexaquark Commented Jul 10, 2015 at 21:27
Add a ment  | 

2 Answers 2

Reset to default 7

Here's how you can animate the sort:

  1. Loop through all the elements and store their positions
  2. Position the elements absolutely at their original positions
  3. Get the position of the item that will be replaced, and animate to that position.
  4. (Optional) After the animation is plete, you may want to swap out the absolutely positioned items with regular items in sorted order, so the DOM order of the elements is correct.

function animateSort(parent, child, sortAttribute) {
  var promises = [];
  var positions = [];
  var originals = $(parent).find(child);
  var sorted = originals.toArray().sort(function(a, b) {
    // return negative for smaller, zero for equal and positive for greater
    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./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>

Though you could easily do this without jquery, here is a (non-animated) way to sort them:

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

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

https://jsfiddle/yne89aw4/

I'll see what I can do about animating the sorting

发布评论

评论列表(0)

  1. 暂无评论