Перетягиваем объекты. Работа с Drag & Drop в JQuery.

Недавно, при работе над очередным сайтом, мне поручили задание разработать что-то типа календаря, в котором пользователи могли бы перетягивать иконки с одного дня на другой. Данную задачу я решил с использованием библиотеки JQuery и ее компонентов UI/Draggable и UI/Droppable, о чем и хочу рассказать в этой статье.

В любой операции drag & drop участвуют два типа элементов: перетягиваемые (draggable) и те, на которых первые могут быть «брошены», т. е. droppable. Причем и тех и других может быть несколько, и вы можете задать какие draggable-элементы могут быть «брошены» на какие droppable.

Ниже я буду приводить фрагменты кода. Предполагается, что вы знакомы с основами JQuery, если нет - http://docs.jquery.com/, это очень простая библиотека.

Сделать элемент перетягиваемым можно таким образом:

$('div.drag').draggable();

При этом, его поведение можно настроить, например следующий фрагмент кода сделает все элементы <div> класса «drag» перетягиваемыми, причем в процессе перетягивания до момента «drop» сам элемент будет неподвижен, а под указателем мыши будет находиться его полупрозрачная (opacity : 0.3) копия:

$('div.drag').draggable({
helper : 'clone',
opacity : 0.3
});

Таким же образом можно задать и обработчики событий start, drag и stop и многие другие параметры. Более подробно на http://docs.jquery.com/UI/Draggable.

Подобным образом задается и «принимающий» (droppable) элемент. Следующий код делает droppable все ячейки класса «drop», причем приниматься будут только элементы <div> класса «drag» (accept : 'div.drag'), срабатывать событие «drop» будет когда элемент отпущен внутри ячейки (tolerance : 'fit'), а при срабатывании будет вызвана функция-обработчик:

$('td.drop').droppable({
tolerance : 'fit',
accept : 'div.drag',
drop : function(event, ui) {
$(this).append(ui.draggable);
}
});

Функции-обработчику доступен сам droppable-элемент - $(this), а также «отпущенный» и попавший на него draggable-элемент $(ui.draggable).
Описание всех параметров доступно на странице http://docs.jquery.com/UI/Droppable.

Ниже привожу код примера полностью. Работа с drag & drop элементами в примере начинается после полной загрузки страницы броузером ($(document).ready(function(){…});).

<html>
<head>
<title>Drag & Drop test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui.all.js"></script>

<style type="text/css">
td.drop,
td.drop2{
border:1px solid black;
width:5em;
height:5em;
padding:0.5em;
}

div.drag{
border:1px solid black;
width:3em;
height:3em;
background:red;
color:white;
}
</style>
</head>
<body>

<script type="text/javascript">
$(document).ready(function(){
$('div.drag').draggable({
helper : 'clone',
opacity : 0.3
});

$('td.drop').droppable({
tolerance : 'fit',
accept : 'div.drag',
drop : function(event, ui) {
$(this).append(ui.draggable);
}
});
});
</script>

<table>
<tr>
<td class="drop">
<div class="drag">drag me</div>
drop here
</td>
<td class="drop">drop here</td>
<td class="drop">drop here</td>
</tr>
<td class="drop2">forbidden</td>
<td class="drop2">forbidden</td>
<td class="drop2">forbidden</td>
</tr>
</table>

</body>
</html>

Загрузить библиотеку можно с сайта http://jquery.com/, компоненты UI/Draggable и UI/Droppable доступны как по частям, так и вместе с основной библиотекой JQuery.UI на странице http://ui.jquery.com/download.

Метки: Программирование, drag & drop, JQuery, javascript.

оценка: 0

автор: simplex | комментариев нет

Перетягиваем объекты. Работа с Drag & Drop в JQuery.

Добавить комментарий

Статьи с похожими тегами ↓

Популярные теги ↓

Логин:
Пароль:

Логин:
Пароль: