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

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

Для реализации перетаскивания объектов можно использовать мощные плагины jQuery UI/Draggable и UI/Droppable. Материал по этим плагинам появится позже, а в данной статье рассмотрим альтернативный вариант — плагин EasyDrag.

В качестве примера работы плагина, предлагаю сыграть в мини-футбол.

Проверено в:

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

Что качать?

(55.9 Kb) — библиотека jQuery версии 1.3.2
(3.86 Kb) — сам плагин в несжатом виде

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

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

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

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

<div id="ball">
	Я мяч
</div>

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

#ball{
	width:60px;
	height:60px;
	background:url(img/ball.png) no-repeat;
	position:absolute;
}

Последнее действие — скрипт:

<script type="text/javascript">
	jQuery("#ball").easydrag();
</script>

Все! Мяч теперь можно перемещать мышкой!

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

Как видишь, все очень просто. Тем не менее, вся необходимая функциональность присутствует. Итак, имеем методы:

easydrag	делаем объект «перетаскиваемым».
dragOff	отключить «перетягиваемость» объекта.
dragOn	включить «перетягиваемость» объекта.

События:

ondrag	возникает многократно во время перетаскивания объекта.
ondrop	возникает в момент отпускания объекта.

Примеры:

Использование события ondrop (узнаем координаты точки, в которую положили объект):

	jQuery("#ball").easydrag();
	jQuery("#ball").ondrop(
		function(e, element){
			var x=jQuery("#ball").offset().left;
			var y=jQuery("#ball").offset().top;
			alert("x="+x+" y="+y);
			}
		});

Использование события ondrag (x будет расти пропорционально пути перемещения):

	jQuery("#ball").easydrag();
 	var x=0;
	jQuery("#ball").ondrag(
		function(e, element){
			x++
			}
		});

Отключаем возможность перемещения:

	jQuery("#ball").dragOff();

Особенности

Объект, на который воздействует скрипт должен быть position:absolute. Если это не учесть изначально, при вызове easydrag() он станет таковым со всеми вытекающими последствиями (например, выпадет из потока, что может вызвать скачок нижележащего контента).

Иногда применяется прием, когда сам объект после начала перемещения остается на месте, а тянется его полупрозрачный образ. В данном плагине этот эффект не реализован.

Плюсы:

адекватно работает во всех популярных браузерах;
очень мал и крайне прост в применении;
реализованы события, вызывающиеся во время перемещения и в момент отпускания;
есть возможность динамически включать/отключать способность к перемещению (методы dragOff() и dragOn()).

Минусы:

Объект должен быть position:absolute. Впрочем, это не должно быть серьезной проблемой, т.к. подвижные элементы скорее всего и так будут с абсолютным позиционированием.
Отсутствует функция перемещения полупрозрачного образа.

Выводы

Малый размер, простота использования и хорошая функциональность! Редкое сочетание. Рекомендуется для быстрого решения несложных задач на перетягивание объектов.

Материал

EasyDrag jQuery Plugin

Xiper