Переупорядочение элементов как визуально, так и в 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>