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

Модуль UI Droppable позволяет обработать момент "сбрасывания" свободно перемещаемого объекта над каким-либо элементом. Для загрузки модуля переходим на страницу http://jqueryui.com/download. Оставляем установленными флажки UI Core, Draggable, Droppable, 1.7.2, а затем щелкаем на кнопке Download. Распаковываем архив в отдельную папку. Из этого архива для работы модуля необходимы следующие файлы:

Все указанные файлы необходимо подключить к скрипту в том порядке, в котором они перечислены. В качестве примера рассмотрим "сбрасывание" элементов и применение опции scope для ограничения области видимости (листинг 12.4).

Листинг 12.4. Модуль UI Droppable, "сбрасывание" элементов

<!doctype html>
<html>
<head>
<title>UI Droppable. &quot;Сбрасывание&quot; элементов</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;">
&nbsp;</div>
<div id="draggable2" style="top:250px;left:50px;">
Блок можно сбросить только на зеленый квадрат</div>
<div id="droppable2"
style="top:250px;left:350px;background-color:green;">&nbsp;</div>
</body>
</html>

Чтобы элемент обрабатывал "сбрасывание" объекта над ним, необходимо указать это с помощью метода droppable(). Формат метода:

droppable([<Объект с опциями>])

Параметр <Объект с опциями> представляет собой объект, состоящий из пар "опция/значение". Могут быть указаны следующие опции.

accept: function(elem) {
   if (elem.attr("id") == "draggable1") return true;
   else return false;
}

Пример указания селектора:

accept: "#draggable1"

В листинге 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() позволяет также управлять элементом. Для этого в первом параметре указываются следующие значения:

Обработать события, происходящие с элементами, можно двумя способами.

droppable({
   <Событие>: <Функция обратного вызова>
});

или

bind(<Событие>, <Функция обратного вызова>)

В параметре <Событие> могут быть указаны следующие события (в скобках указано значение для метода bind()).

В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата.

function <Название функции>([<Объект event>[, <Объект UI>]]) {
   // ...
}

Внутри функции обратного вызова доступна ссылка (this) на текущий элемент, который ожидает "сброса" перемещаемого объекта. Через параметр <Объект UI> доступны следующие свойства.

Пример обработки различных событий приведен в листинге 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>
Предыдущая статья Все статьи Следующая статья