在视觉上和DOM中重新排序元素

Question

我正在创建一个过滤函数，它将动画重新排序一组元素（在这种情况下是项目），并更新它们在DOM中的位置。请参阅js中有关基本概念的评论。

该功能在第一次单击类别过滤器时起作用。但是，重复使用类别过滤器会破坏功能。

问题似乎是使用动画的原始上传位置而不是更新的当前位置的元素。

我已尝试过各种修复方法，但似乎没有任何工作，所以非常感谢任何帮助。

我试图尽可能地简化我的代码：

$('#filterNav').find('a').click(function() {
  var navItem = $(this);
  slideSwap(navItem);
  return false;
});


function slideSwap(navItem) {

  var projContainer = $('#projectContainer');
  var projects = projContainer.find('li');
  var category = navItem.data('sort');

  // 1. Record each project's current positioning
  projects.each(function() {

    $(this).attr('data-latpos', $(this).position().left)
      .attr('data-vertpos', $(this).position().top);

  });

  // 2. Reorder the project list based on selected category
  projects.each(function() {

    if ($(this).data('cat').indexOf(category) != -1) {
      $(this).prependTo(projContainer);
    }
  });

  // 3. Record new project positions
  projects.each(function() {

    $(this).attr('data-newlatpos', $(this).position().left)
      .attr('data-newvertpos', $(this).position().top);

  });

  // 4. Reset to original position with absolute positioning
  projects.each(function() {

    $(this).css({
      position: 'absolute',
      left: $(this).data('latpos'),
      top: $(this).data('vertpos')
    });

  });

  // 5. Animate from original position to new position
  projects.each(function() {

    var project = $(this);

    $(this).animate({
      left: $(this).data('newlatpos'),
      top: $(this).data('newvertpos')
    }, 1000, function() {
      $(this).css('position', 'static');
    });

  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filterNav">
  <li><a href="#" data-sort="cat-1">Cat 1</a>
  </li>
  <li><a href="#" data-sort="cat-2">Cat 2</a>
  </li>
  <li><a href="#" data-sort="cat-3">Cat 3</a>
  </li>
</ul>

<ul id="projectContainer">
  <li data-cat="cat-1">Cat 1</li>
  <li data-cat="cat-3">Cat 3</li>
  ...
  <li data-cat="cat-2">Cat 2</li>
</ul>

Answer 1

回答我自己的问题..问题是我没有完全理解数据属性如何影响他们的元素。

需要在步骤5结束时通过removeData()删除数据属性。现在动画似乎正常工作：

$('#filterNav').find('a').click(function() {
  var navItem = $(this);
  slideSwap(navItem);
  return false;
});


function slideSwap(navItem) {

  var projContainer = $('#projectContainer');
  var projects = projContainer.find('li');
  var category = navItem.data('sort');

  // 1. Record each project's current positioning
  projects.each(function() {

    $(this).attr('data-latpos', $(this).position().left)
      .attr('data-vertpos', $(this).position().top);

  });

  // 2. Reorder the project list based on selected category
  projects.each(function() {

    if ($(this).data('cat').indexOf(category) != -1) {
      $(this).prependTo(projContainer);
    }
  });

  // 3. Record new project positions
  projects.each(function() {

    $(this).attr('data-newlatpos', $(this).position().left)
      .attr('data-newvertpos', $(this).position().top);

  });

  // 4. Reset to original position with absolute positioning
  projects.each(function() {

    $(this).css({
      position: 'absolute',
      left: $(this).data('latpos'),
      top: $(this).data('vertpos')
    });

  });

  // 5. Animate from original position to new position
  projects.each(function() {

    var project = $(this);

    $(this).animate({
      left: $(this).data('newlatpos'),
      top: $(this).data('newvertpos')
    }, 1000, function() {
      $(this).css('position', 'static');

      // Remove data attributes
      $(this).removeData('latpos').removeData('vertpos').removeData('newlatpos').removeData('newvertpos');
    });

  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filterNav">
  <li><a href="#" data-sort="cat-1">Cat 1</a>
  </li>
  <li><a href="#" data-sort="cat-2">Cat 2</a>
  </li>
  <li><a href="#" data-sort="cat-3">Cat 3</a>
  </li>
</ul>

<ul id="projectContainer">
  <li data-cat="cat-1">Cat 1</li>
  <li data-cat="cat-3">Cat 3</li>
  ...
  <li data-cat="cat-2">Cat 2</li>
</ul>