В этом уроке я расскажу, как сделать элемент на сайте перемещаемым.
Для этих целей мы будем использовать
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-элементом.