Этот вопрос может быть немного длинным, и изображения делают его довольно большим, но со мной:)
Мне поручено создать интерфейс панели инструментов в нашем веб-приложении ASP.NET MVC 3. Сначала я расскажу о функциях, которые необходимы для этого проекта, и я приложу все усилия, чтобы проиллюстрировать, что я намерен создать, чтобы разместить все эти функции.
Обязательные функции
-
Личный кабинет будет содержать виджеты (или фрагменты), которые будут перетаскиваться в интерфейсе панели управления.
-
При перетаскивании виджетов окружающие виджеты будут соответствующим образом переупорядочивать себя.
-
Виджеты не являются повторно значимыми или разборчивыми, но они будут съемными. Пользователь добавит виджеты обратно через меню, если они пожелают.
-
Виджеты должны размещать окна браузера переменной ширины. Вертикальное пространство практически неограничено.
-
Высота и ширина виджета будут составлять до 300 пикселей, максимальная высота которых составит 900 пикселей. Другими словами, виджет может быть: 300 x 300, 600 x 300, 300 x 900, 900 x 900 и т.д.
Что я планирую построить
Вот несколько иллюстраций того, что я надеюсь построить.
Размеры не идеальны, но это показывает панель управления с 9 виджетами на ней. Все виджеты аккуратно и делают все возможное, чтобы элегантно заполнить ширину экрана. Однако виджеты не должны формировать идеальный квадрат или прямоугольник. Danglers в порядке, как показано ниже.
Обратите внимание на то, что ширина и высота виджетов все с шагом в 300 пикселей, как указано выше. Это, надо надеяться, облегчит выполнение математики для переупорядочения плиток. Это подводит меня к моей проблеме.
Мой вопрос
У меня есть концепция, но мне трудно понять, с чего начать. Я не так разбираюсь в математике, как мне бы хотелось, и мне нужна помощь, которую нужно указать в правильном направлении. Люди на SO всегда кажутся удивительными при решении такого рода проблем.
Как я могу получить из массива виджетов (всех форм и размеров), которые отсортированы в определенном порядке, в аккуратно выложенную абсолютно позиционированную сетку из плиток, которая занимает как можно более элегантное пространство?
Как мне получить:
Для этого:
Или, по крайней мере, такой же элегантный макет. Плитки не обязательно должны быть в точном месте, как показано на рисунке выше. Я просто хочу, чтобы они сыграли прекрасную игру в тетрис и встали на место без неудобных пробелов.
Мне нужно учесть ширину окна браузера, а затем каким-то образом перебрать массив виджетов и начать добавлять их к какой-то виртуальной сетке. Я хочу, чтобы он выглядел так же изящно, как я могу это сделать.
Затем, решив, как я заказываю виджеты на странице после начальной загрузки страницы, мне нужно разрешить пользователю перемещать свои виджеты, а остальные виджеты переупорядочивать как можно более аккуратно, чтобы разместить перемещенные виджет новой позиции. Мне также нужен элегантный способ переупорядочить виджеты, если браузер изменен.
Я знаю, что это высокий порядок, но любая помощь приветствуется. Я не ожидаю полномасштабных решений или реализаций. Мне просто нужно толчок в правильном направлении, я думаю. Возможно, простое описание мозгового штурма логики для прокрутки виджета и того, что нужно вычислить, чтобы достичь наилучшей конфигурации.
Спасибо, что прочитал мой очень длинный вопрос!
