Топ 5: Лучший дизайнер Dragable, Droppable и Resizable Grid Layout Designer jQuery и плагины JavaScript

Панели инструментов есть везде, но не все они такие классные, как другие. Панель инструментов, которая позволяет пользователю перемещать виджет из одной позиции в другую, и эта конфигурация сохраняется где-то и отображается заново каждый раз, когда пользователь возвращается, является одной из лучших функций, которые вы можете реализовать в административном приложении. К счастью для вас, реализовать такую ​​функцию в вашем проекте можно за считанные минуты, используя плагин с открытым исходным кодом.

К сожалению, не существует большого количества плагинов, которые бы помогли вам с этой функцией, однако вы можете найти достаточно не очень хороших плагинов, поэтому мы собрали для вас 5 самых впечатляющих плагинов, чтобы начать работу с динамическими, изменяемыми и изменяемыми размерами. приборная доска.

5. Макетная сетка

Github

Сетка компоновки — это адаптивная сетка jQStatic с чистым CSS. Javascript с использованием встроенного перетаскивания для изменения порядка размеров экрана на рабочем столе и на мобильном устройстве.

Layout Grid jQuery Плагин

Layout Grid — это плагин, который позволяет создавать статическую адаптивную сетку с чистым CSS и использованием Javascript, чтобы обеспечить встроенную поддержку перетаскивания и перетаскивания для изменения порядка для каждого размера экрана на настольном и мобильном устройствах.

4. jQuery Gridly

Github

Gridly — это плагин jQuery, который позволяет инициализировать макет, который можно изменить путем перетаскивания и изменения размера сетки.

jQuery Gridly

3. JQuery Shapeshift

Github

Вдохновленный плагином jQuery Masonry, Shapeshift — это плагин, который динамически упорядочивает коллекцию элементов в систему сетки столбцов, похожую на Pinterest. Его отличает возможность перетаскивать элементы в сетке, сохраняя при этом позицию логического индекса для каждого элемента. Это позволяет отображать сетку одинаково при каждом использовании Shapeshift, если дочерние элементы находятся в правильном порядке. Библиотека предлагает:

  • Перетаскивание Переставляйте элементы в контейнере или даже перетаскивайте элементы между несколькими контейнерами с поддержкой Shapeshift. Перетаскивание элементов вокруг будет физически менять их индексную позицию в родительском контейнере. Когда страница перезагружается, пока дочерние элементы расположены в правильном порядке, сетка будет выглядеть точно так же.

  • Работает на сенсорных устройствах Shapeshift использует jQuery UI Draggable / Droppable для помощи с системой перетаскивания. К счастью, уже есть плагин под названием JQuery Touch Punch который обеспечивает сенсорную поддержку для JQuery UI D / D. Его можно найти в папке поставщика.

  • Многополосные элементы Новая функция в 2.0 — это возможность добавлять элементы, которые могут охватывать несколько столбцов, если их ширина правильно задана с помощью CSS.

  • Отзывчивая Сетка Включенный по умолчанию, Shapeshift будет прослушивать события изменения размера окна и упорядочивать элементы в нем в соответствии с пространством, предоставленным их родительским контейнером.

jQuery ShapeShift

2. Muuri

Github

Muuri Grid Layout Designer

Muuri — это волшебный движок JavaScript, который позволяет вам создавать всевозможные макеты и делать их адаптивными, сортируемыми, фильтруемыми, перетаскиваемыми и / или анимированными. По сравнению с тем, что там, Муури — это комбинация Packery, Masonry, Isotope и Sortable. Алгоритм компоновки бункера «First Fit» по умолчанию для Muuri создает макеты, похожие на Packery и Masonry. Реализация в значительной степени основана на подходе «maxrects», описанном Юккой Юланки в его исследовании «Тысяча способов упаковать мусорное ведро». Если это не ваша чашка чая, вы всегда можете предоставить свой собственный алгоритм раскладки, чтобы расположить элементы по своему желанию. Muuri использует веб-анимацию для управления внутренним движком анимации и Hammer.js для управления перетаскиванием. И если вас интересует название библиотеки, «muuri» — это финский, что означает стена. Особенности плагина:

  • Полностью настраиваемый макет
  • Тащить, тянуть падение (даже между сетками)
  • Вложенные сетки
  • Быстрые анимации
  • фильтрация
  • Сортировка

1. Gridstack.js

Первоначально известный как gridster.js, проект был первоначально оставлен их разработчиками, однако благодаря потенциалу самой библиотеки он был принят radiolips и trolee, создав группу Gridstack на Github, где вы можете найти проект Gristack сегодня, поддерживаемый форк оригинальной библиотеки, которая используется многими разработчиками по всему миру. Gridstack.js — это удобная для мобильных устройств библиотека Javascript для макета и создания панели мониторинга. Создание многостолбцовой информационной панели с помощью перетаскивания никогда не было проще. gridstack.js позволяет создавать перетаскиваемые, адаптивные макеты для начальной загрузки v3. Он также прекрасно работает с knockout.js, angular.js, ember.

Чтобы использовать Gridstack, вам понадобится jQuery UI (> = 1.12.0), по крайней мере, со следующими компонентами: Core, Widget, Mouse, Draggable, Resizable.

Gridster.js Плагин

Похвальные грамоты

Packery

Packery — это библиотека JavaScript и плагин jQuery, который создает макеты без зазоров и перетаскивание. Он использует алгоритм упаковки бина для заполнения пустых пробелов. Макеты упаковки могут быть разумно упорядочены или органичны. Элементы могут быть проштампованы на месте, помещены в определенное место или перемещены. Он идеально подходит для перетаскиваемой панели инструментов и бесшовных галерей изображений Masonry.

Packery Draggable Grid Layout

Если вам известен еще один замечательный плагин jQuery / JavaScript для создания перетаскиваемых макетов сетки, поделитесь им с сообществом в поле для комментариев.

Ссылка на основную публикацию
Adblock
detector