2007-06-25

CFFORM - Tree - DragDrop

Já escrevi algumas matérias sobre tree, com códigos meus:
Ações e eventos
Tree.dataProvider com XML complexo
mx:Tree addNode/removeNode 2
mx:Tree addNode/removeNode

Ou lembretes sobre outras matérias:
mx:Tree

Mas percebi que nenhuma demonstra o uso de DragDrop, então implementei um pequeno script de exemplo para vocês, e o resultado pode ser observado no filme a seguir.

youtube



<cfform format="flash" name="form" onload="initDragDrop();">
<cfformitem type="script">
function initDragDrop(){
tree.dragEnabled = true;
lista.dragEnabled = true;
tree.multipleSelection = true;
lista.multipleSelection = true;
tree.addEventListener('dragEnter' , dragEnterEvent );
lixeira.addEventListener('dragEnter' , dragEnterEvent );
tree.addEventListener('dragDrop', dragCompleteEvent);
lixeira.addEventListener('dragDrop', dragCompleteEvent);

}
function dragEnterEvent(event){
var source = event.dragSource._data.source;
event.handled = source.__id == 'tree' ? true : ( event.target._name == 'tree' ? true : false );
}
function dragCompleteEvent(event){
var source = event.dragSource._data.source;
if(event.target._name == 'lixeira' && source.__id == 'tree'){
for(var i = _root.tree.selectedNodes.length-1; i>=0; i--){
_root.tree.selectedNodes[i].removeTreeNode();
}
}else if(event.target._name == 'tree' && source.__id == 'lista'){
if(event.target.selectedNode == null){
for(var i = 0; i < source.selectedItems.length; i++){
event.target.addTreeNode(source.selectedItems[i].label,source.selectedItems[i].data);
}
}else{
for(var i = 0; i < source.selectedItems.length; i++){
event.target.selectedNode.addTreeNode(source.selectedItems[i].label,source.selectedItems[i].data);
}
}
}
}
</cfformitem>
<cfformgroup type="horizontal" width="480">
<cftree name = "tree" height="400" width = "250" >
<cftreeitem value="Departamentos" parent="Departamentos" expand="yes">
<cftreeitem value="DPR" parent="Departamentos" expand="yes">
<cftreeitem value="DOP" parent="Departamentos" expand="yes">
<cftreeitem value="DDP" parent="Departamentos" expand="yes">
<cftreeitem value="Empregados" parent="Empregados" expand="yes">
<cftreeitem value="Pedro" parent="Empregados" expand="yes">
<cftreeitem value="Claudio" parent="Empregados" expand="yes">
<cftreeitem value="pcsilva" parent="Empregados" expand="yes">
</cftree>
<cfformitem type="spacer" />
<cfselect name="lixeira" size="4" width="50" />
<cfformitem type="spacer" />
<cfselect name="lista" width="100" size="4" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</cfselect>
</cfformgroup>

</cfform>

3 comentários:

Fernando Richter disse...

Excelente!! Era exatamente o que eu estava procurando!! muito obrigado!

Pedro Claudio disse...

;)
[]s

datalogging disse...

Thanks bro nice