jQuery UI Sortable - перетаскивание элементов

Перетаскивание элементов мышью это удобный прием для задания сортировки списков, таблиц, блоков и т.д. Самый простой способ это реализовать – использование плагина jQuery UI Sortable.

Параметры и события плагина можно посмотреть на http://api.jqueryui.com/sortable/.

1

Нужно только подключить файлы скриптов jQuery, jQuery UI и вызвать плагин с селектором списка <ul>.

<ul class="sortable-ul">
	<li class="bg-yellow">Строка 1</li>
	<li class="bg-yellow">Строка 2</li>
	<li class="bg-green">Строка 3</li>
	<li class="bg-green">Строка 4</li>
	<li class="bg-purple">Строка 5</li>
	<li class="bg-purple">Строка 6</li>
</ul>

<script>
$('.sortable-ul').sortable();
</script>
HTML

Перетаскивание за определенный элемент

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

<ul class="sortable-ul">
	<li>
		<i class="handle"></i> 
		Строка 1 
		<input type="text" placeholder="Введите текст">
	</li>
	...
</ul>

<script>
$('.sortable-ul').sortable({
	handle: '.handle'
});
</script>
JS

Заблокировать элемент

Чтобы заблокировать элемент, нужно добавить к нему класс disabled и указать его в параметре cancel. Также добавить CSS стили для этого класса.

<ul class="sortable-ul">
	<li>Строка 1</li>
	<li class="disabled">Строка 2</li>
	...
</ul>

<style>
.disabled {
	opacity: 0.5;
}
</style>

<script>
$('.sortable-ul').sortable({
	cancel: '.disabled'
});
</script>
HTML

Добавить анимацию

В параметре revert указывается скорость анимации в миллисекундах, она появляется после отпускания элемента.

$('.sortable-ul').sortable({
	revert: 100
});
JS

Многоуровневые списки

Если нужно сделать сортируемый многоуровневый список, то достаточно в вызове плагина указать кроме основного и вложенные <ul>.

<ul class="sortable-ul">
	<li><div>Строка 1</div></li>
	<li>
		<div>Строка 2</div>
		<ul>
			<li><div>Строка 2.1</div></li>
			<li><div>Строка 2.2</div></li>
			<li><div>Строка 2.3</div></li>
			<li><div>Строка 2.4</div></li>
		</ul>		
	</li>
	<li><div>Строка 3</div></li>
	<li><div>Строка 4</div></li>
</ul>

<script>
$('.sortable-ul, .sortable-ul li > ul').sortable();
</script>
HTML
2

UI Sortable в основном ориентирован на списки, у таблиц нужен небольшой фикс т.к. при перетаскивании строки, ее ширина становится меньше чем сама таблица.

<table class="sortable-table">
	<thead>
		<tr>
			<th>#</th>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Username</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Mark</td>
			<td>Otto</td>
			<td>@mdo</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Jacob</td>
			<td>Thornton</td>
			<td>@fat</td>
		</tr>
		...
	</tbody>
</table>

<script>
var fixHelper = function(e, ui) {
	ui.children().each(function() {
		$(this).width($(this).width());
	});
	return ui;
};	

$('.sortable-table tbody').sortable({
	helper: fixHelper
});
</script>
HTML
3

Плагин также работает с плавающими элементами float: left.

<div class="sortable-img">
	<div><img src="/1-min.jpg" alt=""></div>
	<div><img src="/2-min.jpg" alt=""></div>
	...
</div>

<script>
 $('.sortable-img').sortable();
</script>

<style>
.sortable-img div {
	margin: 0 10px 10px 0;
	float: left;
}
</style>
HTML
4
<div class="filter">
	<div class="filter-row">
		<label>Диаметр:</label>
		<select>
			<option></option>
			<option>30-39 мм</option>
			<option>40-49 мм</option>
		</select>	
	</div>
	<div class="filter-row">
		<label>Механизм:</label>
		<select>
			<option></option>
			<option>кварц</option>
			<option>механические</option>
		</select>	
	</div>
	<div class="filter-row">
		<label>Материал:</label>
		<select>
			<option></option>
			<option>Золото</option>
		</select>	
	</div>
	...
</div>

<script>
$('.filter').sortable({
	revert: 100
});
</script>
HTML
.filter {
	overflow: hidden;
}
.filter-row {
	float: left;
	margin: 4px; 
	padding: 10px; 
	background: #eee;
}
CSS
23.11.2017, обновлено 22.01.2020
41305
Предыдущая запись Выбор времени в UI Datepicker

Комментарии 3

Дмитрий Митин Дмитрий Митин
22 января 2020 в 11:25
Очень полезная темка, но прошу уточнить. В многоуровневом списке можно перенести строку только в пределах узла, а когда нужно из узла в узел перекинуть, как организовать?
Snipp.ru Snipp.ru
22 января 2020 в 13:46
Для такой сортировки нужно указать класс родителя в параметре connectWith, например:
$('.sortable-ul, .sortable-ul li > ul').sortable({
	connectWith: '.sortable-ul'
});
Андрей Мирный Андрей Мирный
22 апреля 2020 в 22:28
Очень полезная штука.

, чтобы добавить комментарий.

Другие публикации

jQuery UI – многоуровневый аккордеон с сортировкой
Пример как сделать многоуровневый аккордеон и добавить возможность перетаскивать элементы с помощью плагина jQuery UI...
6933
+4
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
62057
+25
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
43149
+34
Как сделать полосатую таблицу на HTML, CSS, JS, PHP
Сборник методов как сделать HTML таблицу «полосатой» или, как её еще называют «таблица с зеброй».
22567
-2
Модальные окна на Fancybox 3
Fancybox 3 плагин галерей и модельных окон, в отличии от второй версии существенно изменилась скорость работы, дизайн и немного API, далее подробнее о вызове модальных окон.
63881
+2
Перебор ячеек таблицы jQuery
Обойти ячейки таблицы можно с помощью jQuery метода each, например следующий код выводит текст из всех ячеек в консоль.
23987
+3