Самая популярная особенность интерфейса Web 2.0 — это функция перетаскивания. К счастью, script.aculo.us обладает встроенной способностью поддерживать перетаскивание.
Чтобы использовать возможности перетаскивания в script.aculo.us, вам необходимо загрузить модуль dragdrop , для которого также требуется модуль эффектов . Таким образом, ваша минимальная загрузка для script.aculo.us будет выглядеть так:
<script type = "text/javascript" src = "/javascript/prototype.js"></script> <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
Перетаскивание вещей вокруг
Сделать элемент перетаскиваемым с помощью script.aculo.us очень просто. Это требует создания экземпляра класса Draggable и определения элемента, который нужно сделать перетаскиваемым.
Draggable Синтаксис
new Draggable( element, options );
Первый параметр конструктора идентифицирует элемент, который необходимо сделать перетаскиваемым, либо как идентификатор элемента, либо как ссылку на элемент. Второй параметр указывает необязательную информацию о том, как должен вести себя перетаскиваемый элемент.
Перетаскиваемые параметры
При создании перетаскиваемого объекта вы можете использовать один или несколько из следующих параметров.
| вариант | Описание | Примеры |
|---|---|---|
| возвращаться | Если установлено значение true , элемент возвращается в исходное положение после завершения перетаскивания. Также указывает, будет ли вызываться обратный эффект обратного эффекта при остановке операции перетаскивания. По умолчанию false . | |
| щелчок | Используется для того, чтобы перетаскивать привязку к сетке или ограничивать ее движение. Если false (по умолчанию), привязка или ограничение не происходит.
|
|
| ZIndex | Задает z-индекс CSS, который будет применен к элементу во время операции перетаскивания. По умолчанию для z-индекса элемента задано значение 1000 при перетаскивании. | |
| ореолы | Логическое значение, определяющее, следует ли клонировать перетаскиваемый объект для перетаскивания, оставив оригинал на месте, пока клон не будет отброшен. По умолчанию false . | |
| ограничение | Строка, используемая для ограничения перетаскиваемых направлений, горизонтальных или вертикальных . По умолчанию ноль, что означает свободное движение. | |
| справиться | Указывает элемент, который будет использоваться в качестве дескриптора для запуска операции перетаскивания. По умолчанию элемент является собственным дескриптором. | |
| starteffect | Эффект, вызываемый для элемента при начале перетаскивания. По умолчанию изменяет непрозрачность элемента до 0,2 за 0,2 секунды. | |
| reverteffect | Эффект, вызываемый для элемента, когда перетаскивание восстанавливается. По умолчанию используется плавное скольжение к исходной позиции элемента. Вызывается только в том случае, если для возврата задано значение true. | |
| endeffect | Эффект, вызываемый для элемента при перетаскивании, заканчивается. По умолчанию изменяет непрозрачность элемента до 1,0 за 0,2 секунды. |
Если ему назначено целое число x, перетаскиваемый объект будет привязан к сетке из x пикселей.
Если массив [x, y], горизонтальное перетаскивание привязывается к сетке из x пикселей, а вертикальное — к y пикселям.
Это также может быть функция, соответствующая функции (x, y, draggable), которая возвращает массив [x, y].
Параметры обратного вызова
Кроме того, вы можете использовать любую из следующих функций обратного вызова в параметре options —
| функция | Описание | Примеры |
|---|---|---|
| OnStart | Вызывается, когда начинается перетаскивание. | |
| onDrag | Вызывается повторно при перемещении мыши, если положение мыши меняется с предыдущего вызова. | |
| менять | Вызывается так же, как onDrag (который является предпочтительным обратным вызовом). | |
| под конец | Вызывается, когда перетаскивание закончено. |
За исключением обратного вызова «change», каждый из этих обратных вызовов принимает два параметра: объект Draggable и объект события мыши.
Draggable Пример
Здесь мы определяем 5 элементов, которые сделаны перетаскиваемыми: три элемента <div>, элемент <img> и элемент <span>. Цель трех различных элементов <div> состоит в том, чтобы продемонстрировать, что независимо от того, начинается ли элемент с правила позиционирования статического (по умолчанию), относительного или абсолютного, поведение перетаскивания не изменяется.
<html> <head> <title>Draggables Elements</title> <script type = "text/javascript" src = "/javascript/prototype.js"></script> <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script> <script type = "text/javascript"> // Take all the elements whatever you want to make Draggable. var elements = ['normaldiv', 'relativediv', 'absolutediv', 'image', 'span']; // Make all the items drag able by creating Draggable objects window.onload = function() { elements.each(function(item) { new Draggable(item, {});}); } </script> </head> <body> <div id = "normaldiv"> This is a normal div and this is dragable. </div> <div id = "relativediv" style="position: relative;"> This is a relative div and this is dragable. </div> <div id = "absolutediv" style="position: absolute;"> This is an absolute div and this dragable. </div> <br /> <img id = "image" src = "/images/scriptaculous.gif"/> <p>Let part <span id = "span" style = "color: blue;"> This is middle part</span> Yes, only middle part is dragable.</p> </body> </html>
Это даст следующий результат —
Отбрасывание вытащенных вещей
Элемент преобразуется в целевой объект с помощью вызова метода add () в пространстве имен с именем Droppables .
Пространство имен Droppables имеет два важных метода: add () для создания цели удаления и remove () для удаления цели удаления.
Синтаксис
Вот синтаксис метода add () для создания цели удаления. Метод add () создает целевой объект из элемента, переданного в качестве его первого параметра, используя параметры хэша, переданные в качестве второго.
Droppables.add( element, options );
Синтаксис для remove () еще проще. Метод remove () удаляет поведение цели удаления из переданного элемента.
Droppables.remove(element);
Опции
При создании перетаскиваемого объекта вы можете использовать один или несколько из следующих параметров.
| вариант | Описание | Примеры |
|---|---|---|
| Hoverclass | Имя класса CSS, который будет добавлен к элементу, в то время как Droppable активен (имеет приемлемое перетаскивание над ним). По умолчанию равно нулю. | |
| принимать | Строка или массив строк, описывающих классы CSS. Падение может принимать только перетаскиваемые объекты, которые имеют один или несколько из этих классов CSS. | |
| политика сдерживания | Указывает элемент или массив элементов, которые должны быть родительскими для перетаскиваемого элемента, чтобы он был принят целевым объектом перетаскивания. По умолчанию сдерживающие ограничения не применяются. | |
| перекрываться | Если установлено значение «горизонтальный» или «вертикальный», перетаскиваемый элемент будет реагировать на перетаскиваемый элемент только в том случае, если он перекрывается более чем на 50% в заданном направлении. Используется Sortables, обсуждается в следующей главе. | |
| жадный | Если true (по умолчанию), он перестает зависать над другими дескрипторами, при перетаскивании не будет искать. |
Параметры обратного вызова
Кроме того, вы можете использовать любую из следующих функций обратного вызова в параметре options —
| функция | Описание | Примеры |
|---|---|---|
| onHover | Определяет функцию обратного вызова, которая активируется, когда подходящий перетаскиваемый элемент находится над целью отбрасывания. Используется Sortables, обсуждается в следующей главе. | |
| OnDrop | Определяет функцию обратного вызова, которая вызывается, когда подходящий перетаскиваемый элемент помещается на цель удаления. |
пример
Здесь первая часть этого примера аналогична нашему предыдущему, за исключением того, что мы использовали удобную функцию $ A () Prototype для преобразования списка узлов всех элементов <img> в элементе с идентификатором draggables в массив ,
<html>
<head>
<title>Drag and Drop Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
// Make all the images draggables from draggables division.
$A($('draggables').getElementsByTagName('img')).each(function(item) {
new Draggable(item, {revert: true, ghosting: true});
});
Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem});
// Set drop area by default non cleared.
$('droparea').cleared = false;
}
// The target drop area contains a snippet of instructional
// text that we want to remove when the first item
// is dropped into it.
function moveItem( draggable,droparea){
if (!droparea.cleared) {
droparea.innerHTML = '';
droparea.cleared = true;
}
draggable.parentNode.removeChild(draggable);
droparea.appendChild(draggable);
}
</script>
<style type = "text/css">
#draggables {
width: 172px;
border: 3px ridge blue;
float: left;
padding: 9px;
}
#droparea {
float: left;
margin-left: 16px;
width: 172px;
border: 3px ridge maroon;
text-align: center;
font-size: 24px;
padding: 9px;
float: left;
}
.hoverActive {
background-color: #ffffcc;
}
#draggables img, #droparea img {
margin: 4px;
border:1px solid red;
}
</style>
</head>
<body>
<div id = "draggables">
<img src = "/images/html.gif"/>
<img src = "/images/css.gif"/>
<img src = "/images/xhtml.gif"/>
<img src = "/images/wml_logo.gif"/>
<img src = "/images/javascript.gif"/>
</div>
<div id = "droparea">
Drag and Drop Your Images in this area
</div>
</body>
</html>
Это даст следующий результат —