Легкая альтернатива jQuery UI sortable()?

jQuery UI (1.8+) формируется, чтобы быть большой библиотекой, но я нахожу, что он часто делает слишком много для меня. Есть ли альтернативная библиотека для создания сортируемого списка с меньшим размером?
Исключить функциональность, такую как заполнители и сортировка перекрестных списков, приемлема.

Edit:
(Это стало интересной дискуссией, спасибо за все ответы.)
Кажется, что несколько пользователей не знают, что такое jQuery UI sortable. Это не сортировка таблицы, а расположение списка. Подумайте о переупорядочении очереди Netflix. Смотрите демо: http://jqueryui.com/demos/sortable/

Ответ 1

Самый маленький и самый простой код, который я нашел, был HTML5 Sortable. Это крошечный плагин JQuery, который работает в широком диапазоне браузеров и имеет размер всего 1,5 КБ.

Ниже приведены примеры сортировки HTML5.

Ответ 2

Ответы, опубликованные до этого, неожиданно устарели.

Sortable - это быстрый, беззависимый, маленький виджет с переупорядочиваемыми списками с поддержкой касаний, который работает с API-интерфейсом drag &, Вы можете использовать его с 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>

Ответ 3

Хорошо, я ждал, когда кто-нибудь еще получит лучший ответ, но, поскольку этого еще не произошло, я поделюсь своим собственным исследованием:

Jquery sortable plugin является самым популярным и на скачать страница могут быть проверены только соответствующие части (например, только сортируемый плагин), все еще предоставляя служебные данные jquery.
то же самое можно сделать с помощью scrip.aculo.us, который построен на prototype.js
И с YUI
Старая библиотека "DHTML" предоставляет функцию сортируемого списка, а также кроме него есть только 1 другая функция (редактировать на месте). Это единственная "специальная" библиотека, которую я смог найти (к моему удивлению).
Существует несколько других настраиваемых скриптов, которые также являются старыми, например . Поиск этого будет включать в себя ряд из них.

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

Ответ 4

jQuery sortable в 8,4 Kb, миниатюрный - еще один кандидат. Это плагин jQuery и, кажется, активно поддерживается.

Ответ 5

Вы можете попробовать javascriptmvc.com framework. Он построен поверх jquery и обладает мощным механизмом "кражи", который позволяет включать только те части структуры, которые вы действительно используете.

Его библиотека mxui предоставляет возможность сортировки, вы можете попробовать ее здесь: http://javascriptmvc.com/docs.html#!Mxui.Layout.Sortable

Ответ 6

Я предоставляю свой ответ, глядя на SO-ответ, предоставленный Самуэлем Хапаком. Файл steal.js представляет собой тяжелый вес в 18.7kb. Затем, чтобы " украсть" sortables.js в 2.7kb, он приносит его в массивный 21.4kb. Добавление в необязательное падение при 4kb и перетаскивание в 5.5kb приносит итоговую сумму до 30.9kb. Ссылка на демо-страницу здесь и просмотреть вкладку NET NET в инструментах разработчика.

Для сравнения, плагин jQuery UI Sortable весит в 33.3Kb (который включает необходимый голый UI Core, который вам не нужен).

Пожалуйста, рассмотрите Легкий плагин интерфейса Element Sortables, который весит всего лишь 18.9Kb и что с включены три зависимости drag, drop и util.

Элементы сортировки интерфейсных элементов также имеют простой пример страницы ЗДЕСЬ и ЗДЕСЬ.

Ответ 7

Как вы сказали, "jQuery UI (1.8+) формируется, чтобы стать отличной библиотекой". Ну, если вы так думаете, зачем выбирать какую-либо другую библиотеку, я думаю, вам нужна альтернатива, потому что библиотека jQuery ui очень тяжелая для загрузки. Если да, выберите только те функции, которые вам нужны, сделав пользовательскую загрузку. После того, как вы загрузили пользовательскую библиотеку. Загрузите его на свой сервер или загрузите на бесплатный веб-сайт хостинга JavaScript, например, http://yourjavascript.com/. Или выберите веб-сайт из этот список.

Ответ 8

Как я помню, при загрузке пользовательского интерфейса jQuery можно выбрать только те функции, которые требуются вам. Таким образом, вы можете загружать только сортируемые с ним зависимости.

Ответ 9

Jquery/UI будет лучшим способом сделать это, чтобы обеспечить совместимость с несколькими браузерами. Вам даже не нужно загружать файлы JS и CSS с вашего сервера. И jQuery, и jQuery UI можно загрузить из Google CDN. Кроме того, у большинства пользователей уже есть jQuery js файлы, уже кэшированные из Google, поэтому большинству даже не нужно их перезагружать.

<link rel="stylesheet" href="#" onclick="location.href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css'; return false;" 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/