Как создать свой сайт → Уроки jQuery → Урок 11. Плагин droppable

jQuery - Урок 11. Плагин droppable - сбрасываем элементы

Плагин Droppable позволяет перемещаемые элементы сбрасывать в какой-либо другой элемент (самый распространенный пример - корзина). В шестом уроке, мы делали с вами шахматную доску и расставляли на ней шашки. Давайте сделаем так, чтобы нашими шашками можно было ходить (т.е. перемещать их) и дополним игру двумя лотками, куда будем перемещать "съеденные" шашки. Например, вот так:

Для темных шашек

Для светлых шашек

Обратите внимание, что суммируются шашки только тогда, когда помещены в предназначенный для них лоток. Кроме того, подсчитывается количество перемещений шашек, а не их количество в лотке. Итак, html-код:

<html> <head> <title>jQuery плагин droppable</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="board"></div> <div id='lotki'> <div id='lotok1'>Для темных шашек <div id="res1">0</div> </div> <div id='lotok2'>Для светлых шашек <div id="res2">0</div> </div> </div> </body> </html>

А на странице script.js сначала нарисуем доску (функция addBoard) и разместим на ней шашки (функция addDraughts), эти функции мы рассматривали в шестом уроке. Теперь мы должны сделать наши шашки перемещаемыми (плагин draggable) и определить лотки, как целевые элементы (плагин droppable).

$(document).ready(init); function init(){ addBoard(); addDraughts(); $(".s_sh").draggable(); $(".t_sh").draggable(); $("#lotok1").droppable({ accept: '.t_sh', activeClass: 'active', hoverClass: 'hover', drop: function(){ var m=$('#res1').text(); var n=parseInt(m); n=n+1; $('#res1').text(n); } }); $("#lotok2").droppable({ accept: '.s_sh', activeClass: 'active', hoverClass: 'hover', drop: function(){ var m=$('#res2').text(); var n=parseInt(m); n=n+1; $('#res2').text(n); } }); } function addBoard(){ for (var i = 0; i < 8; i++) { for (var j = 0; j <=7; j++) { if ((i%2==0 && j%2==0)|| (i%2!=0 && j%2!=0)){ $("#board").append('<div class="s_kl1" id="'+i+j+'"></div>'); } else $("#board").append('<div class="t_kl1" id="'+i+j+'"></div>'); } } } function addDraughts(){ $("div").filter(".t_kl1").slice(0,12).append('<img src="images/tem_shashka.gif" class="t_sh">'); $("div").filter(".t_kl1").slice(20,32).append('<img src="images/sv_shashka.gif" class="s_sh">'); }

У плагина droppable, как вы заметили, есть ряд параметров, которые мы сейчас и рассмотрим:

accept - целевой элемент будет принимать только те элементы, которые подходят по селектору. В нашем примере, благодаря этому параметру темные шашки суммируются только, если помещены в лоток для темных шашек, аналогично и для светлых шашек.

Пример:

activeClass - здесь можно указать имя класса, который будет применен к целевому элементу в момент начала перемещения. В нашем примере, при перемещении шашек, фон соответствующего лотка становится желтым.

Пример:

hoverClass - здесь можно указать имя класса, который будет применен к целевому элементу в момент, когда перемещаемый элемент окажется над целевым элементом. В нашем примере, фон соответствующего лотка становится зеленым.

Пример:

greedy - этот параметр используется, если целевой элемент является вложенным в другой целевой элемент. По умолчанию параметр имеет значение false. Если установить в true, то сброс будет происходить во внутренний целевой элемент, но не в элемент-родитель.

Пример:

tolerance - определяет, когда будет происходить "сброс" элемента, при нахождении его над целевым элементом. Возможны следующие значения:
- intersect - перемещаемый элемент перекрыл целевой хотя бы на 50% (значение по умолчанию),
- fit – перемещаемый элемент полностью вошел в целевой элемент,
- pointer – указатель мыши вошел в целевой элемент,
- touch – перемещаемый элемент пересек границу целевого.

Пример:

Следующие пять параметров связаны с событиями:

activate - событие наступает с началом перемещения.

deactivate - событие наступает в момент окончания перемещения.

over - событие наступает при входе перемещаемого элемента в целевой.

out - событие наступает при выходе перемещаемого элемента из целевого.

drop - событие наступает в момент "сброса" перемещаемого элемента в целевой.

При использовании этих параметров мы можем определить функцию, которая принимает два аргумента – event (объект события) и ui (специальный объект, содержащий информацию о положении перемещаемого объекта).

Используя свойства этих аргументов, можно узнать координаты объекта в любой момент при перемещении:
- ui.position.left - положение перемещаемого элемента относительно родительского элемента слева,
- ui.position.top - положение перемещаемого элемента относительно родительского элемента сверху,
- ui.offset.left - абсолютное положение перемещаемого элемента слева,
- ui.offset.top - абсолютное положение перемещаемого элемента сверху.

Пример:

$("#lotok1").droppable({ deactivate: function(event, ui) { var a=event.type; var b=ui.position.left; var c=ui.position.top; $('#res').text('Событие: '+a+' Координаты элемента: '+b+', '+c); } });

Также, как и у плагина draggable, у плагина droppable есть четыре метода, которые позволяют менять его работу после инициализации:

destroy - удаляет всю функциональность плагина Droppable.

Пример:

disable - временно запрещает работу всей функциональности плагина Droppable.

Пример:

enable - разрешает работу всей функциональности плагина Droppable (если она была запрещена).

Пример:

option - позволяет установить значения параметров плагина после его инициализации.

Запись:

Ну вот собственно и все про работу плагина Droppable, ничего сложного, поэксперементируйте с различными параметрами. В следующий раз познакомимся с плагином, позволяющим менять размеры у элементов.

Предыдущий урок Вернуться в раздел Следующий урок

Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.

Код кнопки:

Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.