21
ноя
2012
Для этих целей мы будем использовать jQuery UI.
1. Создаем HTML-документ со следующим содержанием:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Перемещаемые элементы</title>
</head>
<body>
<span style="font-family:Cambria;font-size:24px" id="draggable">Перемещаемый текст на сайте</span>
</body>
</html>
2. Внутрь тега head вставляем следующий код:
<link href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.8.2.js"></script>
3. Вспоминаем, что нашему тегу span мы дали идентификатор draggable, и внутрь тега head дописываем:
<script>
$(function() {
$('#draggable').draggable();
});
</script>
Где #draggable напишите идентификатор, который вы дали тегу span в HTML-документе.
Вот и все! Наш текст стал перемещаемым, но это можно сделать не только с текстом, но и с любым HTML-элементом.
Как сделать элемент на сайте перемещаемым
В этом уроке я расскажу, как сделать элемент на сайте перемещаемым.
Для этих целей мы будем использовать jQuery UI.
1. Создаем HTML-документ со следующим содержанием:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Перемещаемые элементы</title>
</head>
<body>
<span style="font-family:Cambria;font-size:24px" id="draggable">Перемещаемый текст на сайте</span>
</body>
</html>
2. Внутрь тега head вставляем следующий код:
<link href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.8.2.js"></script>
3. Вспоминаем, что нашему тегу span мы дали идентификатор draggable, и внутрь тега head дописываем:
<script>
$(function() {
$('#draggable').draggable();
});
</script>
Где #draggable напишите идентификатор, который вы дали тегу span в HTML-документе.
Вот и все! Наш текст стал перемещаемым, но это можно сделать не только с текстом, но и с любым HTML-элементом.
|
|
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Datalife Engine
Релизы
WordPress
Joomla
Другие CMS
Web-Мастеру
Игры/Игровые CMSПоследние комментарии
-
Написал(а): SergTSY
В новости: QR Menu Maker v3.4.0 - бесконтактное меню ресторанаСсылки не рабочие.
Перезалейте, плз? -
Написал(а): anons01
В новости: Akeeba Backup Pro v9.9.2 - компонент резервного копирования для JoomlaUpload doesn't work -
Написал(а): sania4m
В новости: Aoxio v2.1 Nulled - скрипт для бронирования бизнес-услугустановка проходит , но не создается база данных -
Написал(а): Nibiru7
В новости: JRealtime Analytics v3.9.2 - компонент аналитики для Joomlaспасибо за -
Написал(а): jackxren88
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaМожет есть у кого-то решение как убрать "запрос на ключ"? -
Написал(а): Escudocu
В новости: YOO Glowbar v March 1, 2024 - Joomla шаблон для сайтов о красоте и модеБлагодарю за шаблон!!! -
Написал(а): sendinfo
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaВиндоус ругается на вирус! Проверьте архив. -
Написал(а): pmvb
В новости: Advanced Module Manager Pro v10.0.18 - расширенный менеджер модулей JoomlaADVANCED MODULE MANAGER PRO V10.0.18 просит ключь???