Облегченная альтернатива sortable() в jQuery UI?
jQuery UI (1.8+) превращается в отличную библиотеку, но я обнаружил, что она часто делает для меня слишком много. Есть ли альтернативная библиотека для создания сортируемого списка, который занимает меньше места?
Исключая функциональность, такая как заполнители и сортировка по спискам, допустима
Редактировать:
(Это стало интересным обсуждением, спасибо за все ответы.)
Похоже, что некоторые пользователи не знают, что такое сортировка jQuery UI. Это не сортировка таблиц, а расстановка списков. Подумайте о переупорядочении очереди Netflix. Смотрите демо здесь: http://jqueryui.com/demos/sortable/
9 ответов
Самый маленький и простой код, который я нашел, был HTML5 Sortable. Это крошечный плагин JQuery, который работает в самых разных браузерах и имеет размер всего 1,5 КБ.
Ответы, опубликованные до этого, на удивление устарели.
Sortable - это быстрый, не зависимый, небольшой переставляемый виджет списков с поддержкой касания, который работает с собственным HTML5 API drag & drop. Вы можете использовать его с Bootstrap, Foundation или любой другой библиотекой CSS, которая вам нужна, и создание ее занимает всего одну строку.
Он поддерживает переупорядочение в списке или между списками. Вы можете определить списки, которые могут принимать только элементы или списки, из которых вы можете перетащить, но в которые вы не можете удалить. Это также очень активно поддерживается и лицензируется MIT на GitHub.
new Sortable(document.getElementsByClassName('sortable')[0]);
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Sortable -->
<script src="https://rawgit.com/RubaXa/Sortable/master/Sortable.js"></script>
<ul class="list-group sortable">
<li class="list-group-item">This is <a href="http://rubaxa.github.io/Sortable/">Sortable</a></li>
<li class="list-group-item">It works with Bootstrap...</li>
<li class="list-group-item">...out of the box.</li>
<li class="list-group-item">It has support for touch devices.</li>
<li class="list-group-item">Just drag some elements around.</li>
</ul>
Сортировка jQuery на 8,4 Кбайт - еще один кандидат. Это плагин JQuery, и, кажется, активно поддерживается.
Хорошо, я ждал, пока кто-нибудь получит лучший ответ, но так как этого еще не произошло, я поделюсь своим собственным исследованием:
- Сортируемый плагин Jquery на сегодняшний день является самым популярным, и на странице загрузки могут быть проверены только соответствующие части (например, только сортируемый плагин), что по-прежнему приводит к издержкам jquery.
- То же самое возможно с scrip.aculo.us, который построен на prototype.js
- И с YUI
- Старая библиотека "DHTML" обеспечивает возможность сортировки списка, а также только 1 другую функцию, кроме нее (редактирование на месте). Это единственная "специализированная" библиотека, которую мне удалось найти (к моему удивлению).
- Есть несколько других пользовательских скриптов, которые все старые, такие как этот. Поиск этого найдет много таких.
Если бы я позволил себе теоретизировать об этом недостатке, я бы предположил, что это так, потому что перетаскивание требует много кросс-браузерных хаков и исправлений в старых браузерах, и, таким образом, любой, кто планирует преодолеть эту проблему, будет зависеть от существующих библиотек, которые по крайней мере, ограничить количество боли.
Я даю свой ответ, посмотрев на SO-ответ Самуэля Хапака. steal.js
файл является тяжеловесом в 18.7kb
, Затем " украсть " sortables.js
в 2.7kb
доводит это до здоровенного 21.4kb
, Добавление в опциональное падение в 4kb
и перетащите на 5.5kb
приносит общую сумму 30.9kb
, Обратитесь к демонстрационной странице здесь и просмотрите исходную вкладку NET в инструментах разработчика.
Для сравнения, плагин jQuery UI Sortable весит в 33.3Kb
(который включает в себя необходимые голые UI Core
что ты не хочешь).
Пожалуйста, обратите внимание на облегченный плагин Interface Element Sortables, который весит всего 18.9Kb
и это с тремя зависимостями drag
, drop
, а также util
включен.
Элемент интерфейса Sortables также имеет простой пример страницы ЗДЕСЬ и ЗДЕСЬ.
Вы можете попробовать фреймворк javascriptmvc.com. Он построен на основе jquery и имеет мощный механизм "кражи", который позволяет вам включать только те части фреймворка, которые вы действительно используете.
Его библиотека mxui обеспечивает сортируемую функциональность, вы можете попробовать ее здесь: http://javascriptmvc.com/docs.html
Насколько я помню, при загрузке пользовательского интерфейса jQuery можно выбирать только те функции, которые вам нужны. Таким образом, вы можете скачать только сортируемую с ее зависимостями.
Как вы сказали, "jQuery UI (1.8+) превращается в отличную библиотеку". Хорошо, если вы так думаете, зачем выбирать любую другую библиотеку, я думаю, что вы хотите альтернативу ей, потому что библиотека пользовательского интерфейса jQuery очень тяжелая для загрузки. Если да, выберите только те функции, которые вам нужны, сделав пользовательскую загрузку. После того, как вы загрузили пользовательскую библиотеку. Загрузите его на свой сервер или загрузите на бесплатном хостинг-сайте JavaScript, например:
http://yourjavascript.com/.
Или выберите сайт из этого списка.
Jquery / UI был бы лучшим способом сделать это для обеспечения кросс-браузерной совместимости. Вам даже не нужно загружать файлы JS и CSS с вашего сервера. И jQuery, и jQuery UI могут быть загружены из Google CDN. Кроме того, большинство пользователей уже имеют jQuery js-файлы, уже кэшированные из Google, поэтому большинству даже не нужно их перезагружать.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
Также просмотрите эту ссылку, чтобы узнать, почему лучше загрузить jQuery из Google, как я уже упоминал выше. http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/