Web-мастеру Руководство по использованию технологии перетащи-и-брось на jQuery. Часть 1 из 2.Руководство по использованию технологии перетащи-и-брось на jQuery. Часть 1 из 2.
Перетаскивание элементов интерфейса с помощью курсора мыши является, скорее всего, самым интуитивно понятным способом взаимодействия пользователя с вашим сайтом или приложением. Люди часто пытаются использовать перетаскивание с помощью курсора мыши для таких действий:
- Перемещение сообщений email в папки.
- Изменение порядка элементов в списках.
- Перемещение объектов в играх, таких как карточные игры или головоломки.
Реализация техники перетащи-и-брось на JavaScript обычно достаточно сложно выполнить - в действительности получить работающую кросс браузерную версию было практически невозможно. Но с появлением современных браузеров и новых версий jQuery техника перетащи-и-брось стала доступным инструментом!
В данном уроке мы рассмотрим, как создать интерфейс с техникой перетащи-и-брось на jQuery и построим завершенное приложение: детскую игру по раскладке карт.
jQuery UI
Для добавления функционала перетащи-и-брось к вашим страницам нужно включить библиотеку jQuery и плагин jQuery UI. jQuery UI является фантастическим дополнением для jQuery и включает большое количество виджетов интерфейса для реализации различных визуальных эффектов и алгоритмов работы, в том числе и для техники перетащи-и-брось.
Самый простой способ подключить библиотеки - воспользоваться Google CDN:
<head> ... <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> ... </head>
Делаем элемент перетаскиваемым
Когда вы добавляете элемент к вашей веб странице (например, div или изображение), то он фиксируется в определённом положении. Однако с помощью jQuery UI легко сделать его перетаскиваемым с помощью курсора мыши.
Чтобы сделать элемент перемещаемым, просто вызываем метод draggable() для него. Вот так:
<!doctype html>
<html lang="ru">
<head>
<style>
#makeMeDraggable { width: 300px; height: 300px; background: red; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
$( init );
function init() {
$('#makeMeDraggable').draggable();
}
</script>
</head>
<body>
Нажмите здесь, чтобы посмотреть пример в действии.
Добавляем опции перетаскивания
Методу draggable() можно передать много различных опций для настройки поведения элемента при перетаскивании:
$('#makeMeDraggable').draggable( {
опция1: значение1,
опция2: значение2,
...
} );
Некоторые часто используемые опции из большого списка:
containment- По умолчанию вы можете перетаскивать элементы по всей странице. Но можно ограничить область перемещения определенной частью. Для опции
containmentможно использовать значения:'parent'- Ограничиваем область перемещения родительским элементом
'document'- Ограничиваем область перемещения всей страницей
'window'- Ограничиваем область перемещения окном браузера
- Селектор
- Ограничиваем область перемещения выбранным элементом
- Массив из 4 значений (
[x1,y1,x2,y2]) - Ограничиваем область перемещений определенным прямоугольником
cursor- Изменяем курсор при перемещении. Например, можно установить значение
'move', чтобы курсор мыши приобрел вид пересекающихся двухсторонних стрелок при перетаскивании элемента. snap- Устанавливаем селектор (например,
snap: '#snapToMe') элемента, к которому прилипает перетаскиваемый элемент. Также можно установить значениеtrue,чтобы перетаскиваемый элемент прилипал к любому другому перетаскиваемому элементу страницы. stack- Если вы создаете группу перетаскиваемых элементов, например, набор карт, то обычно один из них, как правило, последний двигаемый объект, нужно располагать поверх остальных элементов группы. Установив опции
stackзначение в виде селектора, который соответствует группе элементов, вы можете добиться такого поведения объектов. jQuery UI задаст свойстваz-indexэлементов так, что текущий перетаскиваемый объект будет располагаться сверху.
Для просмотра полного списка доступных опций, смотрите документацию jQuery UI.
Изменим наш пример, чтобы использовать некоторые опции:
function init() {
$('#makeMeDraggable').draggable( {
containment: '#content',
cursor: 'move',
snap: '#content'
} );
}
Нажмите здесь, чтобы посмотреть пример в действии.
Обратите внимание на изменение поведения перетаскиваемого объекта: его перемещение ограничено элементом #content, вид курсора изменяется, и сам перетаскиваемый элемент прилипает к границам ограничивающего элемента.
Используем вспомогательный элемент
Вспомогательный элемент используется при перетаскивании вместо оригинального элемента. Данный метод очень удобен, если нужно оставить оригинальный элемент на своем месте, но в то же время дать возможность пользователю перетащить что-то с его позиции в другое место страницы. Например, предоставляем пользователю возможность перетаскивать цветовой указатель с палитры на объект, для которого надо поменять цвет.
Для использования вспомогательного элемента нужно установить опцию helper. Доступные значения для данной опции:
'original'- Значение по умолчанию. Перемещается сам оригинальный элемент.
'clone'- Создается копия элемента, которая перемещается.
- Функция
- Данная опция позволяет создавать произвольный вспомогательный элемент. Вы определяете функцию, которая принимает объект
eventи возвращает разметку вспомогательного элемента. Данный элемент затем перемещается вместо оригинала.
Когда используется значение 'clone' или функция, то вспомогательный элемент разрушается после завершения операции перетаскивания. Однако вы можете использовать событие stop, чтобы получить информацию о вспомогательном элементе (например, его положение) перед уничтожением.
Следующий пример использует функцию для создания пользовательского вспомогательного элемента для операции перетаскивания. Мы модифицируем предыдущие примеры:
<style>
#makeMeDraggable { width: 300px; height: 300px; background: red; }
#draggableHelper { width: 300px; height: 300px; background: yellow; }
</style>
...
<script type="text/javascript">
$( init );
function init() {
$('#makeMeDraggable').draggable( {
cursor: 'move',
containment: 'document',
helper: myHelper
} );
}
function myHelper( event ) {
return '<div id="draggableHelper">Вспомогательный элемент - тащи меня!</div>';
}
</script>
Нажмите здесь, чтобы посмотреть пример в действии.
События: реагируем на перемещения
Часто, когда пользователь перетаскивает элемент, нужно знать, когда перетаскивание началось и закончилось, а также новое положение элемента. Вы можете привязать функции для обработки нескольких событий, которые генерируются операцией перетаскивания:
$('#makeMeDraggable').draggable( {
eventName: eventHandler,
...
} );
Список доступных событий:
create- Генерируется при создании перетаскиваемого элемента вызовом функции
draggable(). start- Генерируется при начале процесса перетаскивания элемента.
drag- Генерируется при перемещении курсора мыши в процессе перетаскивания элемента.
stop- Генерируется, когда пользователь отпускает кнопку мыши после перетаскивания элемента.
Обработчик события должен принимать 2 аргумента:
- Объект события (
event). - Объект jQuery UI, который представляет перетаскиваемый элемент (
ui).
Для объекта ui доступны 3 опции для получения информации о перетаскиваемом элементе:
helper- Объект jQuery, который представляет вспомогательный элемент для перетаскивания.
position- Объект, который содержит положение перетаскиваемого элемента относительно оригинальной позиции. Объект имеет два свойства:
left(X координата от левой границы элемента), иtop(Y координата от верхней границы элемента). offset- Объект, который содержит положение перетаскиваемого элемента относительно документа. Как и объект
position, он имеет два свойстваleftиtop.
Изменим наш пример так, чтобы он показывал информацию о конечном положении перетаскиваемого элемента относительно документа, когда пользователь отпускает кнопку мыши:
<script type="text/javascript">
$( init );
function init() {
$('#makeMeDraggable').draggable( {
cursor: 'move',
containment: 'document',
stop: handleDragStop
} );
}
function handleDragStop( event, ui ) {
var offsetXPos = parseInt( ui.offset.left );
var offsetYPos = parseInt( ui.offset.top );
alert( "Перетаскивание завершено!\n\nСмещение: (" + offsetXPos + ", " + offsetYPos + ")\n");
}
</script>
Нажмите здесь, чтобы посмотреть пример в действии.
Задаем стили для перетаскиваемого элемента
Иногда важно придать перетаскиваемому элементу другой вид. Например, нужно выделять перетаскиваемый элемент, или добавить тень для него, чтобы он выглядел приподнятым над страницей.
При перетаскивании элемента jQuery UI использует для него класс CSS ui-draggable-dragging. Вы можете установить свойства для данного класса, чтобы изменить стиль перетаскиваемого элемента.
Изменим код нашего примера так, чтобы квадрат менял цвет с красного на зеленый при перетаскивании:
<style>
#makeMeDraggable { width: 300px; height: 300px; background: red; }
#makeMeDraggable.ui-draggable-dragging { background: green; }
</style>
Нажмите здесь, чтобы посмотреть пример в действии.
Устанавливаем целевой элемент для перетаскивания
Мы только что описали, как сделать элемент перетаскиваемым, и как обрабатывать события перетаскивания.
Но есть другой способ реагировать на перетаскивание элементов. Можно создать целевой элемент, который будет принимать перетаскиваемые элементы.
Когда перетаскиваемый элемент бросается над целевым элементом, последний генерирует событие drop. Написав функцию обработчик события drop, вы можете определить, какие элементы воспринимаются целевым элементом.
Вы также можете использовать события over и out для определения, когда перетаскиваемый элемент находится над целевым и когда покидает его. Для более детальной информации смотрите документацию по jQuery UI.
Чтобы сделать элемент целевым, нужно использовать метод droppable().
Изменим код нашего примера, чтобы создать целевой элемент:
<!doctype html>
<html lang="ru">
<head>
<style>
#makeMeDraggable { float: left; width: 300px; height: 300px; background: red; }
#makeMeDroppable { float: right; width: 300px; height: 300px; border: 1px solid #999; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
$( init );
function init() {
$('#makeMeDraggable').draggable();
$('#makeMeDroppable').droppable( {
drop: handleDropEvent
} );
}
function handleDropEvent( event, ui ) {
var draggable = ui.draggable;
alert( 'Квадрат с ID "' + draggable.attr('id') + '" был доставлен к месту назначения!' );
}
</script>
</head>
<body>
<div id="content" style="height: 400px;">
<div id="makeMeDraggable"> </div>
<div id="makeMeDroppable"> </div>
</div>
</body>
</html>
Мы создали функцию handleDropEvent() для реагирования на событие drop. Так как это событие перетаскивания, функция должна принимать два аргумента: объекты event и ui.
Объект ui имеет свойство draggable, значения которого соответствует перетаскиваемому элементу. Наша функция использует данное свойство вместе с методом jQuery attr()для получения ID перетаскиваемого элемента ("makeMeDraggable").
Нажмите здесь, чтобы посмотреть пример в действии.
Заключение
В первой части мы рассмотрели основные моменты для создания приложения, использующего технологию "перетащи-и-брось". В следующей части мы построим законченное простое приложение - детскую игру по раскладке карт.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/JeL8akbvOoA/lessons.php
|
Перетаскивание элементов интерфейса с помощью курсора мыши является, скорее всего, самым интуитивно понятным способом взаимодействия пользователя с вашим сайтом или приложением. Люди часто пытаются |
РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Жизнь подобна универмагу: в ней находишь всё, кроме того, что ищешь Кроткий Эмиль - (1892—1963) - русский поэт–сатирик, юморист и афорист |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.