Boxes e listas arrastáveis com ajax

Introdução

É muito fácil e rápido criar boxes e listas arrastáveis utilizando a biblioteca ToolMan, que foi desenvolvida pelo Tim Taylor e não possui nenhuma restrição a sua utilização. O ToolMan utiliza Java script não-obstrutivo e todos seus arquivos pesam apenas 20Kb. São utilizados para criar boxes e listas; arrastáveis, editáveis e auto-ordenáveis. O Blog BeNLOG adaptou o ToolMan para trocar itens entre listas diferentes, veja um exemplo de listas arrastáveis, boxes arrastáveis e listas arrastáveis que trocam itens.

Conceitos

Para utilizar o ToolMan é necessario: (1º) criar uma variável tendo como valor a identificação do elemento que será arrastado (var nome_da_variável = document.getElementById(”id_da_div“)), (2º) digitar o comando para executar o TollMan, sendo seu valor a variável que foi criada (drag.createSimpleGroup(nome_da_variável_que_você_criou)) e caso queira, (3º) digitar o comando para limitação ou restrição, que pode ser: somente na vertical, horizontal ou entre diversas outras citadas abaixo.

Pré-requisito

Arquivos para os boxes: core.js (1k), events.js (1k), css.js (1k), coordinates.js (4k), drag.js (7k).
Arquivos para as listas: dragsort.js (2k), cookies.js (1k) mais os de cima
Arquivos para as listas que trocam os itens: coordinates.js (3k), drag.js (7k) e dragdrop.js (6k)

Conteúdo

Boxes arrastáveis

Primeiro inclua os arquivos; core.js, events.js, css.js, coordinates.js, drag.js dentro da tag HEAD.

<script language=”JavaScript” type=”text/javascript” src=”../source/org/tool-man/core.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”../source/org/tool-man/events.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”../source/org/tool-man/css.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”../source/org/tool-man/coordinates.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”../source/org/tool-man/drag.js”></script>

Crie uma função em Java Script para que ao carregar toda a pagina HTML execute o ToolMan. Dentro dessa função vamos carregar três variáveis do ToolMan

<script language=”JavaScript”>
window.onload = function() {
var group
var coordinates = ToolMan.coordinates()
var drag = ToolMan.drag()
}
</script>

Ainda dentro do código Java Script é necessário criar as variáveis de configuração dos boxes. Cada tipo de box requer um configuração, veja abaixo as disponíveis:

Box Drag

O Box Drag fica solto na tela podendo ser arrastado para qualquer lugar. Para utilizá-lo, crie uma variável tendo como valor a identificação do elemento (var boxDrag = document.getElementById(”id_da_div_boxDrag“)) nessa caso a variável vai se chamar boxdrag, digite o comando para executar o ToolMan e coloque como valor desse comando a variável que você criou, ficando assim: drag.createSimpleGroup(boxDrag)

var boxDrag = document.getElementById(”id_da_div_boxDrag“)
drag.createSimpleGroup(boxDrag)

Agora é só criar uma DIV com o ID sendo igual ao informado na variável

<div id=”id_da_div_boxDrag”>
<p>Conteúdo</p>
</div>

Box Vertical

O Box Vertical pode se arrastado somente na vertical. Para utilizá-lo, crie uma variável (boxVerticalOnly) tendo como valor a identificação do elemento, digite o comando para executar o ToolMan, sendo seu valor a variável que foi criada, e informe a limitação group.verticalOnly(), ou seja, arrasta somente na vertical.

var boxVerticalOnly = document.getElementById(”id_da_div_boxVertical“)
group = drag.createSimpleGroup(boxVerticalOnly)
group.verticalOnly()

Agora é só criar uma DIV com o ID sendo igual ao informado na variável

<div id=”id_da_div_boxVertical”>
<p>Conteúdo</p>
</div>

Box Horizontal

O Box Horizontal é o contrario do Box Vertical e poderá se arrastado somente na horizontal. Para utilizá-lo, crie uma variável (boxHorizontalOnly) sendo o seu valor a identificação do elemento, digite o comando para executar o ToolMan tendo como valor a variável que foi criada e informe a limitação group.horizontalOnly(), ou seja, arrastar somente na horizontal.

var boxHorizontalOnly = document.getElementById(”id_da_div_boxHorizontal“)
group = drag.createSimpleGroup(boxHorizontalOnly)
group.horizontalOnly()

Crie uma DIV nome com o ID sendo igual ao informado na variável

<div id=”id_da_div_boxHorizontal”>
<p>Conteúdo</p>
</div>

Box Handle

O Box Handle é semelhante ao Box Drag mais para arrastá-lo é necessário definir uma área dentro do box, onde somente clicando nela será possível arrastá-lo. Crie uma variável (boxHandle) tendo como valor a identificação do elemento, digite o comando para executar o ToolMan tendo como valor a variável que foi criada e a identificação do elemento que será a área que vai arrastá-lo, separados pela virgula (,).

var boxHandle = document.getElementById(”id_da_div_boxHandle“)
group = drag.createSimpleGroup(boxHandle, document.getElementById(”id_da_area_handle”))

Crie uma DIV nome com os IDs sendo igual ao informado na variável

<div id=”id_da_div_boxHandle”>
<div id=”id_da_area_handle”>Área Arrastavel</div>
<p>Box Handle</p>
<p>Clique na área arratavel e arraste para qualquer lugar</p>
</div>

Box Region Constraint

Nesse tipo de box é possível definir uma área limite para arrastar o box. Crie uma variável (boxRegionConstraint)com o valor sendo a identificação do elemento, e digite o comando para executar o ToolMan, sendo seu valor a variável que foi criada.

var boxRegionConstraint = document.getElementById(”id_da_div_boxRegionConstraint“)
group = drag.createSimpleGroup(boxRegionConstraint)

Crie outra variável para delimitação das margim, insira em pixes dentro dos parênteses na primeira linha.

var origin = coordinates.create(0, 0)
group.addTransform(function(coordinate, dragEvent) {

Copie o cole essa variável para delimitação de qual lado poderá ser arrastado.

var originalTopLeftOffset =
dragEvent.topLeftOffset.minus(dragEvent.topLeftPosition)
return coordinate.constrainTo(origin, originalTopLeftOffset)
})

Crie uma DIV nome com o ID sendo igual ao informado na variável.

<div id=”id_da_div_boxRegionConstraint”>
<p>Box Region Constraint</p>
<p>Pode ser arratado para esquerda e com margin de 20px</p>
</div>

Box com posição fixa

É possível criar um box com uma posição fixa que se movimente por uma linha na horizontal ou vertical. Crie uma variável tendo como valor a identificação do elemento, digite o comando para executar o ToolMan, sendo seu valor a variável que foi criada e informe como limitação que sua movimentação será somente na horizontal (group.horizontalOnly()) ou vertical (group.verticalOnly()) na terceira linha do código JS.

var boxAbsolute = document.getElementById(”id_da_div_boxAbsolute”)
group = drag.createSimpleGroup(boxAbsolute)
group.verticalOnly()

Agora adicione o código abaixo, que fara o resto

group.addTransform(function(coordinate, dragEvent) {
var scrollOffset = coordinates.scrollOffset()
if (coordinate.y < scrollOffset.y)
return coordinates.create(coordinate.x, scrollOffset.y) var clientHeight = coordinates.clientSize().y
var boxHeight = coordinates._size(boxAbsolute).y
if ((coordinate.y + boxHeight) > (scrollOffset.y + clientHeight))
return coordinates.create(coordinate.x,
(scrollOffset.y + clientHeight) - boxHeight)

return coordinate
})

Crie uma DIV nome com o ID sendo igual ao informado na variável

<div id=”id_da_div_boxAbsolute “>
<p>Box Region Constraint</p>
<p>Pode ser arratado para esquerda e com margin de 20px</p>
</div>

Listas

Lista auto-ordenáveis

Agora aprenderemos a criar lista arrastáveis e auto-ordenáveis, ou seja, que se arrastam e se encaixam perfeitamente, e o melhor e que ele vai armazenar a seqüência de ordenamento em um cookie. Assim a eqüência será armazenada para visitas futuras do usuário. Para executar essa função é necessário incluir além dos que já foram incluídos anteriormente mais dois arquivos JS: dragsort.js e cookies.js.

<script language=”JavaScript” type=”text/javascript” src=”dragsort.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”cookies.js”></script>

Crie um bloco de código de Java Script e informe a identificação do UL e da LI da lista. Inicie criando as variáveis do ToolMan, só que agora para utilizar o Drag Sort.

<script language=”JavaScript” type=”text/javascript”><!–
var dragsort = ToolMan.dragsort()
var junkdrawer = ToolMan.junkdrawer() //–>
</script>

Ainda dentro do bloco de código crie uma função para que ao carregar toda a pagina html execute o ToolMan Drag Sort. Dentro dessa função vamos carregar as variáveis necessárias. Coloque como valor dos comandos junkdrawer.restoreListOrder e dragsort.makeListSortable do ToolMan a indentificação do UL da lista conforme mostrado abaixo em negrito, para que a posição da lista seja gravada e possa se arrastada.

window.onload = function() {
junkdrawer.restoreListOrder(”id_da_lista“) dragsort.makeListSortable(document.getElementById(”id_da_lista”),
saveOrder)

}

Agora digite essa função responsavel pelo armazenamento e ordenamento da lista

function saveOrder(item) {
var group = item.toolManDragGroup
var list = group.element.parentNode
var id = list.getAttribute(”id”)
if (id == null) return
group.register(’dragend’, function() {
ToolMan.cookies().set(”list-” + id,
junkdrawer.serializeList(list), 365)
})
}

E pronto.

Listas auto-ordenáveis que podem ser trocados os itens entre si

Baseado no ToolMan do Tim Taylor o Blog BeNLOG adaptou o script para que os itens das listas se auto-organizem e possam ser trocados de uma lista para outra. Para isso é necessário apenas três arquivos JS que foram atualizado para suporta essa função e pesam apenas 16Kb, e que também não é obstrutivo.

<script language=”JavaScript” type=”text/javascript” src=”coordinates.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”drag.js”></script>
<script language=”JavaScript” type=”text/javascript” src=”dragdrop.js”></script>

Iniciaremos criando um bloco de código de Java Script que inicie a função (window.onload) assim que a página for carregada. Crie uma variável (var list) e digite seu valor sendo a identificação da lista (document.getElementById(”id_da_lista”)) e escreva o comando para que seja criado a movimentação das listas (DragDrop.makeListContainer( list );) tendo como valor a variável que foi criada. É possível também executar dois eventos; um quando a lista inicia o arrastamento (list.onDragOver) e outro quando termina (list.onDragOut). Nesse exemplo vamos alterar o cor de fundo (function() { this.style["background"] = “#EEF”; }) quando o usuario for mover a lista. Faça o mesmo na outra lista, crie uma variável (list) e passe a indetificaçãoo da lista (document.getElementById(”id_da_lista2″);), execute o comando para que seja criado a movimentação das listas e adicione outros eventos.

<script language=”JavaScript” type=”text/javascript”><!–
window.onload = function() {
var list = document.getElementById(”id_da_lista“);
DragDrop.makeListContainer( list );
list.onDragOver = function() { this.style["background"] = “#EEF”; };
list.onDragOut = function() {this.style["background"] = “none”; };

list = document.getElementById(”id_da_lista2“);
DragDrop.makeListContainer( list );
list.onDragOver = function() { this.style["background"] = “#EEF”; };
list.onDragOut = function() {this.style["background"] = “none”; };
};
//–>
</script>

Considerações Finais

Autor: Marcelo Souza Ramos - Colunista Dreamweaver do Portal MXSTUDIO

Qualquer dúvida envie um email para ramos.marcelosouza@gmail.com