Introdução

Como a quantidade de pedidos para continuar falando sobre Flash Forms, foi grande, nesta matéira abordarei sobre a interação entre componentes, baseando no famoso drag-drop.
O que é muito comun em sistemas web é a transferência
de dados entre listas, para construção de uma aplicação assim existem inumeras formas, mas para formato HTML, no formato Flash Form ainda é um pouco escasso, para CFFORM, porém podem ser achados.
Abordarei sobre algo muito semelhante, basicamente o que farei é pegar os dados de uma lista e jogar em uma lixeira, isso será feito arrastando os dados com o mouse.

Pré-requisito

Para a construção desta aplicação foi utilizado o ColdFusion MX 7.

Objetivo

Observar a construção de Drag-Drop entre componentes

Conceitos

Fundamentalmente está baseado na utilização do método addEventListener que já estudamos em outra matéria, conjulgado com eventos pouco utilizados como dragEnter, dragOver, dragExit, dragDrop, dragComplete e ainda a propriedade dragEnabled.
Aqui nos concentraremos nos básico, ou seja nos concentraremos em dragEnter e dragComplete.

Conteúdo

Primeiro construimos um flash form comun como a seguinte.

Flash Form este, construido com o seguinte script:

drag_drop_lixeira01.cfm

<cfform format=”flash” name=”form” onload=”initDragDrop();”> <cfformitem type=”script”>
function initDragDrop(){
lista.dragEnabled = true; //permite arrasto
lista.multipleSelection = true; //permite seleção multipla
}
</cfformitem>

<cfformgroup type=”horizontal” width=”300″>

<cfselect name=”lista” width=”100″ size=”4″ >
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
</cfselect>

<cfformitem type=”spacer” />

<cfgrid name=”lixeira” width=”34″ rowheaders=”no” colheaders=”no” rowheight=”50″ height=”55″>
<cfgridcolumn name=”img” type=”image” >
<cfgridrow data=”http://localhost:8080/cfusion/drag/lixo.jpg”>
</cfgrid>

</cfformgroup>

</cfform>

E com este script já podemos arrastar os dados da lista, isto apenas porque alteramos o valor da propriedade dragEnabled do componente list.

O que faremos agora é permitir que a lixeira aceite um arrasto sobre ela, e isto é conseguido no evento dragEnter da lixeira.

drag_drop_lixeira02.cfm

<cfform format=”flash” name=”form” onload=”initDragDrop();”> <cfformitem type=”script”>
function initDragDrop(){
lista.dragEnabled = true; //permite arrasto
lista.multipleSelection = true; //permite seleção multipla

lixeira.addEventListener(’dragEnter’ , dragEnterEvent );

}

function dragEnterEvent(event){
event.handled = true; //permite sobrepôr
}

</cfformitem>

<cfformgroup type=”horizontal” width=”300″>

<cfselect name=”lista” width=”100″ size=”4″ >
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
</cfselect>

<cfformitem type=”spacer” />

<cfgrid name=”lixeira” width=”34″ rowheaders=”no” colheaders=”no” rowheight=”50″ height=”55″>
<cfgridcolumn name=”img” type=”image” >
<cfgridrow data=”http://localhost:8080/cfusion/drag/lixo.jpg”>
</cfgrid>

</cfformgroup>

</cfform>

Onde o resultado será um pouco diferente do primeiro, repare.

E por fim excluiremos os dados arrastados para a lixeira, quando o mouse é liberado sobre ela, para isto nos utilizaremos do evento dragComplete do componente list.

drag_drop_lixeira03.cfm

<cfform format=”flash” name=”form” onload=”initDragDrop();”> <cfformitem type=”script”>
function initDragDrop(){
lista.dragEnabled = true; //permite arrasto
lista.multipleSelection = true;
lixeira.addEventListener(’dragEnter’ , dragEnterEvent );

lista.addEventListener(’dragComplete’, dragCompleteEvent);

}
function dragEnterEvent(event){
event.handled = true;
}

function dragCompleteEvent(event){
var index = event.target.selectedIndices;
var i = index.length-1;
for(;i >= 0 ;i–){
event.target.dataProvider.removeItemAt(index[i]);
}
event.target.selectedIndex = null;
}

</cfformitem>

<cfformgroup type=”horizontal” width=”300″>

<cfselect name=”lista” width=”100″ size=”4″ >
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
</cfselect>

<cfformitem type=”spacer” />

<cfgrid name=”lixeira” width=”34″ rowheaders=”no” colheaders=”no” rowheight=”50″ height=”55″>
<cfgridcolumn name=”img” type=”image” >
<cfgridrow data=”http://localhost:8080/cfusion/drag/lixo.jpg”>
</cfgrid>

</cfformgroup>

</cfform>

Conclusão

Com este conceito simples, você pode construir aplicações mais complexas, e explorar os demais eventos de um Drag-Drop.

–
Pedro Claudio – pcsilva@mxstudio.com.br
visite o fórum MXStudio ColdFusion