Плагин jQuery drag из набора Interface

Interface — это богатый набор различных компонентов для создания пользовательского интерфейса на основе любимой мной библиотеки JQuery.

Один из этих компонентов — герой дня idrag. Он позволяет быстро организовать перетаскивание объектов и обладает хорошим набором эффектов.

Как это выглядит можешь посмотреть на примере работы плагина idrag.

Проверено в:

• IE 6-8
• Firefox 3
• Opera 9.5-10
• Safari 3

Что качать?

• jquery.js (55.9 Kb) — библиотека jQuery версии 1.3.2
• iutil.js (6.13 Kb) — отвечает за пермещение объекта
• idrag.js (20.83 Kb) — вычисление позиций объекта

Заметка

iutil.js и idrag.js можно объединить в один файл, для уменьшения количества отдельных файлов.

Так же можно плагин собрать самостоятельно на официальном сайте Interface.

Быстрый старт

Подключаем jQuery и сам плагин:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/iutil.js"></script>
<script type="text/javascript" src="js/idrag.js"></script>

Блоку, который будет перемещаться добавляем id:

<div id="drag">
	Уф! Меня можно будет тянуть!
</div>

В CSS задаем размеры блока, фон и, обязательно, абсолютное позиционирование.

#drag{
	width:60px;
	height:60px;
	background:#000;
	position:absolute;
}

Последний штрих — инициализация скрипта. Например так:

$('#drag').Draggable({
	opacity:	0.5
});

Как видишь, ничего сложного!

А теперь немного подробнее

Настройки и эффекты

У данного плагина есть множество настроек и эффектов. Вот пример лишь некоторых, которые я посчитал самыми важными (остальные можно найти на официальном сайте, ну или заглянуть в код idrag.js):

Примеры:

Режим призрака:

	$('#drag').Draggable({
		ghosting: true,
		opacity: 0.5,
		fx:	300
	});

Перемещаем только за div, расположенный внутри #drag:

	$('#drag').Draggable({
		handle:	'div',
	});

Перемещаем только в пределах родителя:

	$('#insideParent').Draggable({
		zIndex: 1000,
		ghosting: false,
		opacity: 0.7,
		containment: 'parent',
	});

Плюсы:

• работает во всех популярных браузерах;
• очень прост в использовании;
• имеет множество различных эффектов.

Минусы:

• довольно большой размер (вместе с iutil.js в 7 раз больше, чем EasyDrag);
• объект должен быть position:absolute. Впрочем, это не должно быть сербезной проблемой, т.к. подвижные элементы скорее всего и так будут с абсолютным позиционированием.

Выводы

Хорошая функциональность. Добротный плагин для создания drag-and-drop. Рекомендуем использовать вместо EasyDrag, если требуются дополнительные эффекты.

По теме:

• Плагин jQuery EasyDrag — проще не бывает