jquery - 在视觉上和 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>