Как мне создать свою страницу, чтобы обеспечить динамическое перемещение элементов на странице?

Question

Я работаю над страницей ASP.NET, где у меня есть 10 сущностей. Я назову их Предметами. Элемент может отображаться в одном из двух режимов: «Избранное» или «Миниатюра». В любой момент времени в верхней части страницы есть один рекомендуемый элемент, а остальные - миниатюры, расположенные в сетке 3х3 под выбранным элементом. Каждый элемент - это пользовательский элемент управления ASP, который содержит два элемента div: один элемент div для элемента Featured и один элемент для Thumbnail - - когда элемент «Избранный», элемент «Миниатюра» устанавливается как невидимый, и наоборот.

Моя текущая цель состоит в том, чтобы иметь возможность щелкнуть любой из эскизов и сделать так, чтобы он физически поменялся местами с выбранным в данный момент элементом, чтобы выбранный эскиз стал новым текущим избранным элементом в верхней части страницы. Конечная цель состоит в том, чтобы использовать jQuery для анимации движения, но на данный момент это лишь побочный аспект. Также обратите внимание, что я пытаюсь сделать все это без обновления страницы (т.е. я хочу использовать AJAX или javascript)

Вот некоторые из возможностей, о которых я думал:

1. Поместите всю страницу в UpdatePanel и переставьте, какой элемент управления пользователя Item попадает в какой заполнитель (я использую заполнители)

   • Плюсы: просто
   • Минусы: ОЧЕНЬ НЕЗАКОННО. В каждом предмете уже есть пара UpdatePanels, несмотря на мои попытки минимизировать их использование

2. Используйте jQuery / javascript, чтобы поменять местами порядок элементов на странице

   • Плюсы: простой обмен ордера сработает, потому что у меня есть элементы с плавающей точкой
   • Минусы: мой javascript / jquery слабый, и если пользователь когда-либо уйдет и вернется, изменения не будут сохраняться.

Дорогие веб-разработчики, что бы вы сделали, если бы были на моем месте?

Answer 1

Это похоже на слайд-шоу. Как таковой, я бы пошел строго на стороне клиента JavaScript. Я бы не стал слишком беспокоиться о сохранении состояния, хотя вы могли бы сделать это, если захотите, установив файл cookie или добавив URL-адрес с привязками хэшей.

Кроме того, в этот момент вам не нужно было бы использовать несколько DIV для каждого элемента. Вы можете с помощью jQuery переместить сам div и затем изменить атрибут SRC (и CSS) изображения, чтобы получить более крупный.