jQuery. Модуль UI Droppable — сбрасывание элементов

Модуль 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>