Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Модуль UI Droppable — сбрасывание элементов
Модуль UI Droppable позволяет обработать момент "сбрасывания" свободно перемещаемого объекта над каким-либо элементом. Для загрузки модуля переходим на страницу http://jqueryui.com/download. Оставляем установленными флажки UI Core, Draggable, Droppable, 1.7.2, а затем щелкаем на кнопке Download. Распаковываем архив в отдельную папку. Из этого архива для работы модуля необходимы следующие файлы:
- jquery-1.3.2.min.js (папка js);
- jquery-ui-1.7.2.custom.min.js (папка js).
Все указанные файлы необходимо подключить к скрипту в том порядке, в котором они перечислены. В качестве примера рассмотрим "сбрасывание" элементов и применение опции scope
для ограничения области видимости (листинг 12.4).
Листинг 12.4. Модуль UI Droppable, "сбрасывание" элементов
<!doctype html>
<html>
<head>
<title>UI Droppable. "Сбрасывание" элементов</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script>
$(document).ready(function() {
$("#draggable1").draggable({
helper: "clone",
scope: "test", // Ограничение области видимости
zIndex: 9000
});
$("#droppable1").droppable({
scope: "test", // Ограничение области видимости
drop: function() {
alert("Попали...");
}
});
$("#draggable2").draggable({ helper: "clone", zIndex: 9000 });
$("#droppable2").droppable({
drop: function() {
alert("Попали...");
}
});
});
</script>
<style>
body { font-size:8pt; font-family:Verdana, sans-serif; }
div {
position:absolute;
top:10px; left:50px;
width:100px; height:100px;
padding:2px;
border:2px solid #000000;
text-align:center;
background-color:#fff4dd;
}
</style>
</head>
<body>
<div id="draggable1" style="top:50px;left:50px;">
Блок можно сбросить только на красный квадрат</div>
<div id="droppable1" style="top:50px;left:350px;background-color:red;">
</div>
<div id="draggable2" style="top:250px;left:50px;">
Блок можно сбросить только на зеленый квадрат</div>
<div id="droppable2"
style="top:250px;left:350px;background-color:green;"> </div>
</body>
</html>
Чтобы элемент обрабатывал "сбрасывание" объекта над ним, необходимо указать это с помощью метода droppable()
. Формат метода:
droppable([<Объект с опциями>])
Параметр <Объект с опциями>
представляет собой объект, состоящий из пар "опция/значение". Могут быть указаны следующие опции.
scope
— ограничивает область видимости при "сбрасывании" элементов. Если в перемещаемом элементе указана другая область видимости, то событиеdrop
не сработает. В качестве значения указывается произвольная строка. Значение по умолчанию —"default"
.accept
— позволяет указать элементы, которые могут быть "сброшены". В качестве значения может быть указан селектор jQuery или ссылка на функцию. Если указана ссылка на функцию, то внутри функции необходимо вернуть значениеtrue
, если элемент можно "сбросить". Если в качестве параметра функции указать переменную, то через ее будет доступна ссылка (объект jQuery) на "сбрасываемый" элемент. Пример использования функции:
accept: function(elem) {
if (elem.attr("id") == "draggable1") return true;
else return false;
}
Пример указания селектора:
accept: "#draggable1"
activeClass
— если указано значениеfalse
, то классui-droppable
не будет автоматически добавляться при инициализации. Значение по умолчанию —true
.addClasses
— стилевой класс, добавляемый к элементу при перемещении объекта, который может быть успешно "сброшен". Значение по умолчанию —false
.hoverClass
— стилевой класс, добавляемый к элементу, если объект находится над зоной "сброса" и "сбрасывание" объекта будет успешным. Значение по умолчанию —false
.tolerance
— определяет, в каком случае "сбрасывание" будет успешным. Могут быть указаны следующие значения:
intersect
— если перемещаемый объект на 50% расположен над элементом (значение по умолчанию);fit
— если перемещаемый объект полностью расположен над элементом;pointer
— если указатель мыши находится над элементом;touch
— если любая точка перемещаемого объекта расположена над элементом.
greedy
— если указано значениеtrue
, то событие "сбрасывания" над вложенным элементом не будет обрабатываться родительским элементом. Значение по умолчанию —false
.
В листинге 12.5 приведен пример, демонстрирующий возможности опции greedy
, а также других опций.
Листинг 12.5. Модуль UI Droppable, использование опции greedy
<!doctype html>
<html>
<head>
<title>Модуль UI Droppable. Использование опции greedy</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script>
$(document).ready(function() {
$("#draggable1").draggable({
helper: "clone", // Перемещаем копию элемента
zIndex: 9000
});
$("#droppable1").droppable({
// Сбросить можно только элемент с id=draggable1
accept: "#draggable1",
addClasses: false, // Отключаем добавление класса ui-droppable
activeClass: "cls1", // Класс, добавляемый при перемещении
// Класс, добавляемый, если сбрасывание объекта будет успешным
hoverClass: "cls2",
// Объект должен целиком располагаться над элементом
tolerance: "fit",
drop: function() {
alert("Попали в родительский блок");
}
});
$("#droppable2").droppable({
greedy: true,
activeClass: "cls1",
hoverClass: "cls2",
drop: function() {
alert("Попали во вложенный блок");
}
});
$("#btn1").click(function() {
if ($("#droppable2").droppable("option", "greedy")) {
$("#droppable2").droppable("option", "greedy", false)
.html("Вложенный блок<br>greedy = false");
}
else {
$("#droppable2").droppable("option", "greedy", true)
.html("Вложенный блок<br>greedy = true");
}
});
});
</script>
<style>
body { font-size:8pt; font-family:Verdana, sans-serif; }
div {
position:absolute;
width:100px; height:100px;
padding:2px;
border:2px solid #000000;
text-align:center;
background-color:#fff4dd;
}
.cls1 { background-color:#ff0000; }
.cls2 { background-color:#008800; }
.ui-draggable-dragging {
/* Класс, добавляемый при перемещении элемента */
background-color:#ff9600;
}
</style>
</head>
<body><br><br>
<input type="button" value="Поменять значение опции greedy"
id="btn1">
<div id="draggable1" style="top:150px;left:50px;">
Сбрось меня на вложенный блок</div>
<div id="droppable1"
style="top:50px;left:350px;width:250px;height:250px;">
Блок-цель
<div id="droppable2"
style="top:110px;left:20px;width:200px;height:120px;">
Вложенный блок<br>greedy = true</div>
</div>
</body>
</html>
Чтобы изменить или получить значения опций уже после создания, необходимо использовать второй формат метода droppable()
. Для этого в первом параметре указывается значение "option"
, во втором — название опции, а в третьем — новое значение.
$("#droppable").droppable("option", "greedy", true);
Если необходимо получить значение опции, то третий параметр указывать не нужно. Получим значение опции tolerance
:
alert($("#droppable").droppable("option", "tolerance"));
Второй формат метода droppable()
позволяет также управлять элементом. Для этого в первом параметре указываются следующие значения:
disable
— временно запрещает обработку "сбрасывания";enable
— разрешает обработку "сбрасывания", если ранее она была запрещена с помощью методаdisable
;destroy
— удаляет всю функциональность и возвращает все элементы в первоначальное состояние.
Обработать события, происходящие с элементами, можно двумя способами.
droppable({
<Событие>: <Функция обратного вызова>
});
или
bind(<Событие>, <Функция обратного вызова>)
В параметре <Событие>
могут быть указаны следующие события (в скобках указано значение для метода bind()
).
activate
(dropactivate
) — наступает в начале перемещения элемента, который может быть "сброшен". Элемент можно "сбросить", если он находится в одной области видимости (опцияscope
) и разрешен опциейaccept
.over
(dropover
) — возникает, когда перемещаемый объект находится в зоне "сброса", заданной опциейtolerance
.out
(dropout
) — возникает, когда перемещаемый объект покидает зону "сброса", заданную опциейtolerance
.drop
(drop
) — наступает, когда "сброс" элемента выполнен успешно.deactivate
(dropdeactivate
) — возникает, когда перемещаемый элемент был "сброшен" (вне зависимости от успешности). При успешном "сбросе" событие наступает после событияdrop
.
В параметре <Функция обратного вызова>
указывается ссылка на функцию следующего формата.
function <Название функции>([<Объект event>[, <Объект UI>]]) {
// ...
}
Внутри функции обратного вызова доступна ссылка (this
) на текущий элемент, который ожидает "сброса" перемещаемого объекта. Через параметр <Объект UI>
доступны следующие свойства.
draggable
— ссылка (объект jQuery) на оригинал перемещаемого элемента.helper
— ссылка (объект jQuery) на копию элемента (если опцияhelper
равнаclone
) или на сам элемент (если опцияhelper
равнаoriginal
).position
— текущая позиция перемещаемого объекта относительно родительского элемента. Доступны два свойства:
top
— положение сверху;left
— положение слева.
offset
— текущая позиция перемещаемого объекта относительно окна. Доступны два свойства:
top
— положение сверху;left
— положение слева.
Пример обработки различных событий приведен в листинге 12.6.
Листинг 12.6. Модуль UI Droppable, обработка событий
<!doctype html>
<html>
<head>
<title>Модуль UI Droppable. Обработка событий</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script>
$(document).ready(function() {
$("#draggable1").draggable({ revert: "invalid", zIndex: 9000 });
$("#draggable2").draggable({ revert: "valid", zIndex: 9000 });
$("#draggable3").draggable({ helper: "clone", zIndex: 9000 });
$("#droppable").droppable({
activate: function(e, ui) {
$("#span1").append("Событие activate<br>");
ui.helper.css("background-color", "#ff9600");
},
deactivate: function(e, ui) {
$("#span1").append("Событие deactivate<br>");
ui.helper.css("background-color", "#fff4dd");
$(this).css("background-color", "#fff4dd");
},
over: function() {
$("#span1").append("Событие over<br>");
$(this).css("background-color", "#008800");
},
out: function() {
$("#span1").append("Событие out<br>");
$(this).css("background-color", "#fff4dd");
},
drop: function(e, ui) {
var msg = "Координаты сброса:<br> position - сверху: ";
msg += ui.position.top +" px, слева: " + ui.position.left;
msg += " px<br>offset - сверху: " + ui.offset.top;
msg += " px, слева: " + ui.offset.left + " px<br>";
$("#span1").append("Событие drop<br>" + msg);
}
}).bind("dropactivate", function() {
$("#span1").html("Событие dropactivate<br>");
}).bind("dropdeactivate", function() {
$("#span1").append("Событие dropdeactivate<br>");
}).bind("dropover", function() {
$("#span1").append("Событие dropover<br>");
}).bind("dropout", function() {
$("#span1").append("Событие dropout<br>");
}).bind("drop", function() {
$("#span1").append("Событие drop (bind)<br>");
});
$("#btn1").click(function() {
$("#droppable").droppable("disable");
});
$("#btn2").click(function() {
$("#droppable").droppable("enable");
});
});
</script>
<style>
body { font-size:8pt; font-family:Verdana, sans-serif; }
div {
position:absolute; width:100px; height:100px; padding:2px;
border:2px solid #000000; text-align:center;
background-color:#fff4dd;
}
</style>
</head>
<body>
<input type="button" value="Запретить" id="btn1">
<input type="button" value="Разрешить" id="btn2"><br><br>
<span id="span1"></span>
<div id="draggable1" style="top:50px;left:600px;z-index:5">
Перемещаемый блок 1<br>revert = invalid</div>
<div id="draggable2" style="top:200px;left:600px;z-index:5">
Перемещаемый блок 2<br>revert = valid</div>
<div id="draggable3" style="top:350px;left:600px;z-index:5">
Перемещаемый блок 3<br>helper = clone</div>
<div id="droppable"
style="top:50px;left:250px;width:250px;height:250px;">
Блок-цель</div>
</body>
</html>
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF
Помощь сайту
Yandex-деньги: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов