script.aculo.us - Arrastar e soltar
O recurso mais popular da interface da Web 2.0 é o recurso de arrastar e soltar. Felizmente, o script.aculo.us vem com uma capacidade inerente para suportar arrastar e soltar.
Para usar os recursos de arrastar de script.aculo.us, você precisará carregar o dragdrop módulo, que também requer o effectsmódulo. Portanto, seu carregamento mínimo para script.aculo.us ficará assim:
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>Arrastando coisas
É muito simples tornar um item arrastável usando script.aculo.us. Isso requer a criação de uma instância da classe Draggable e a identificação do elemento a ser arrastado.
Sintaxe arrastável
new Draggable( element, options );O primeiro parâmetro para o construtor identifica o elemento a ser arrastado como o id do elemento ou uma referência ao elemento. O segundo parâmetro especifica informações opcionais sobre como o elemento arrastável deve se comportar.
Opções arrastáveis
Você pode usar uma ou mais das seguintes opções ao criar seu objeto arrastável.
| Opção | Descrição | Exemplos |
|---|---|---|
| reverter | Se definido como verdadeiro , o elemento retorna à sua posição original quando o arrasto termina. Também especifica se o retorno de chamada de efeito reverso será invocado quando a operação de arrastar parar. O padrão é falso . | Exemplo |
| estalo | Usado para fazer com que um objeto arrastável se encaixe em uma grade ou para restringir seu movimento. Se false (padrão), não ocorre ajuste ou restrição.
|
Exemplo |
| zindex | Especifica o índice z CSS a ser aplicado ao elemento durante uma operação de arrastar. Por padrão, o índice z do elemento é definido como 1000 ao arrastar. | Exemplo |
| fantasma | Booleano determinando se o arrastável deve ser clonado para arrastar, deixando o original no lugar até que o clone seja solto. O padrão é falso . | Exemplo |
| restrição | Uma string usada para limitar as direções arrastáveis, horizontal ou vertical . O padrão é nulo, o que significa movimento livre. | Exemplo |
| lidar com | Especifica um elemento a ser usado como alça para iniciar a operação de arrastar. Por padrão, um elemento é seu próprio identificador. | Exemplo |
| efeito estelar | Um efeito chamado no elemento ao iniciar o arrastamento. Por padrão, ele altera a opacidade do elemento para 0,2 em 0,2 segundos. | Exemplo |
| efeito reverso | Um efeito chamado no elemento quando o arrasto é revertido. O padrão é um deslizamento suave para a posição original do elemento. Chamado somente se a reversão for verdadeira. | Exemplo |
| efeito final | Um efeito chamado no elemento ao arrastar termina. Por padrão, ele altera a opacidade do elemento para 1,0 em 0,2 segundos. | Exemplo |
Opções de retorno de chamada
Além disso, você pode usar qualquer uma das seguintes funções de retorno de chamada no parâmetro de opções -
| Função | Descrição | Exemplos |
|---|---|---|
| onStart | Chamado quando um arrasto é iniciado. | Exemplo |
| onDrag | Chamado repetidamente quando um mouse se move, se a posição do mouse mudar em relação à chamada anterior. | Exemplo |
| mudança | Chamado apenas como onDrag (que é o retorno de chamada preferido). | Exemplo |
| No fim | Chamado quando um arrasto é encerrado. | Exemplo |
Exceto para o retorno de chamada "alterar", cada um desses retornos de chamada aceita dois parâmetros: o objeto arrastável e o objeto de evento do mouse.
Exemplo arrastável
Aqui, definimos 5 elementos que podem ser arrastados: três elementos <div>, um elemento <img> e um elemento <span>. O objetivo dos três elementos <div> diferentes é demonstrar que, independentemente de um elemento começar com uma regra de posicionamento estático (o padrão), relativo ou absoluto, o comportamento de arrastar não é afetado.
<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>Isso produzirá o seguinte resultado -
Soltando Coisas Arrastadas
Um elemento é convertido em um destino de soltar por meio de uma chamada ao método add () em um namespace chamado Droppables .
O namespace Droppables tem dois métodos importantes: add () para criar um alvo de soltar e remove () para remover um alvo de soltar.
Sintaxe
Aqui está a sintaxe do método add () para criar um destino de soltar. O método add () cria um destino de eliminação do elemento passado como seu primeiro parâmetro, usando as opções no hash passado como o segundo.
Droppables.add( element, options );A sintaxe para remove () é ainda mais simples. O método remove () remove o comportamento de destino de soltar do elemento passado.
Droppables.remove(element);Opções
Você pode usar uma ou mais das seguintes opções ao criar seu objeto arrastável.
| Opção | Descrição | Exemplos |
|---|---|---|
| Hoverclass | O nome de uma classe CSS que será adicionada ao elemento enquanto o droppable estiver ativo (tem um arrastável aceitável pairando sobre ele). O padrão é nulo. | Exemplo |
| Aceitar | Uma string ou uma matriz de strings que descreve as classes CSS. O droppable só aceitará arrastáveis que tenham uma ou mais dessas classes CSS. | Exemplo |
| Contenção | Especifica um elemento, ou matriz de elementos, que deve ser pai de um item arrastável para ser aceito pelo destino de soltar. Por padrão, nenhuma restrição de contenção é aplicada. | Exemplo |
| Sobreposição | Se definido como 'horizontal' ou 'vertical', o droppable só reagirá a um Draggable se estiver sobreposto em mais de 50% na direção dada. Usado por classificáveis, discutido no próximo capítulo. | |
| ávido | Se verdadeiro (padrão), ele para de pairar sobre outros droppables, sob o draggable não será pesquisado. | Exemplo |
Opções de retorno de chamada
Além disso, você pode usar qualquer uma das seguintes funções de retorno de chamada no parâmetro de opções -
| Função | Descrição | Exemplos |
|---|---|---|
| onHover | Especifica uma função de retorno de chamada que é ativada quando um item arrastável adequado passa sobre o destino de soltar. Usado por classificáveis, discutido no próximo capítulo. | |
| onDrop | Especifica uma função de retorno de chamada que é chamada quando um elemento arrastável adequado é solto no destino de soltar. | Exemplo |
Exemplo
Aqui, a primeira parte deste exemplo é semelhante ao nosso exemplo anterior, exceto que usamos a função $ A () útil do Prototype para converter uma lista de nós de todos os elementos <img> no elemento com o id de draggables para um array .
<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>Isso produzirá o seguinte resultado -