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

Автор: Егор Скорняков и Александр Головко Дата публикации: 08.06.2010

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):

ghosting true/false эффект «призрака» (true - вкл, false - выкл)
opacity 0..1 прозрачность блока, которая будет в момент перетаскивания
fx число задержка в миллисекундах для выполнения перетаскивания (для эффектов ghosting и revert)
grid [x,y] объявление шага перемещения блока
axis vertically/horizontally режим перетаскивания только по одной оси
handle элемент объявление элемента, за который можно таскать
containment parent перетаскиваемый блок не выйдет за границы родителя
cursorAt {top:-5,left:-5 } устанавливаем положение курсора, относительно перетаскиваемого блока.

Примеры:

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

	$('#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, если требуются дополнительные эффекты.

По теме: