Rede de dados - Arrastar e soltar objetos

A nova rede de dados do 4D Ajax Framework v11.1 tem capacidade de arrastar e soltar integrada. Este exemplo mostra como ativar, arrastar e soltar entre dois objetos de rede de dados. Mostra 3 formas diferentes de arrastar e soltar.

Ativar Opção arrastável

Para ativar a opção arrastável em uma rede de dados, o comando setDragCells deve executar-se no objeto rede. Este comando também deve executar-se depois a construção do objeto rede (dragGrid.go();)

    Sintaxes: dragGrid.setDragCells(row, column, isDroppable);

Ativar Opção Droppable

Para a ativação da opção Droppable em uma rede de dados, o evento "ondragrelease" deve ativar-se para o objeto rede. Este evento permite ao desenvolvedor determinar a resposta específica quando um objeto solta-se em uma cela. Para ativar este evento, deve definir uma função javascript para o evento.

    Sintaxe: dropGrid.ondragrelease = YourFunction;


Neste exemplo, definimos o nome da função que responderá ao evento ondragrelease como "onDragReleaseEvent". Aqui está a chamada que se realiza no exemplo:

    dropGrid.ondragrelease = onDragReleaseEvent;

A função que responderá à ondragrelease e receberá 2 parâmetros de entrada. Em este exemplo, a função chamada onDragReleaseEvent se vê assim:

    function onDragReleaseEvent(cellRef, event) {
        // Fazer algo aqui
    }

Para oferecer um indicador visual de que uma cela está sendo arrastada, o evento "ondragover" ativa-se para o objeto rede. Este evento permite ao desenvolvedor determinar uma resposta específica quando um objeto arrasta-se sobre uma cela. Para ativar este evento, deve definir-se uma função javascript para o evento.

    Sintaxe: dropGrid.ondragover = YourFunction;

Neste exemplo, definimos o nome da função que responderá ao evento ondragrelease como "onDragOverEvent". Está é a chamada que se realiza no exemplo:

    dropGrid.ondragover = onDragOverEvent;

Ao igual que o evento ondragrelease, a função que responderá a ondragrelease e receberá 2 parâmetros de entrada. Neste exemplo, a função chamada onDragOverEvent se vê desta forma:

    function onDragOverEvent(cellRef, event) {
        // Hacer algo acá
    }

Em todo o exemplo o evento ondragover utiliza-se para mudar temporalmente a cor do fundo da cela arrastada. Faz-se facilmente devolvendo o nome de um estilo css como resultado.

    function onDragOverEvent(cellRef, event) {
        return 'dragdrop_style';
    }

Exemplos

Exemplo 1: Arrastar e soltar simples
Quando ondragrelease dispara a função onDragReleaseEvent, chama a outra função chamada doexample1 com a sua referência de cela soltada passa o parâmetro.

    function doexample1(cellRef){
        var originCell = dax_bridge.hoverDragging.dragObjectSource;
        var srcvalue = originCell.value;
        dropGrid.setCellValue(cellRef.row, cellRef.column, srcvalue);
    }

Uma vez soltada a cela, simplesmente recuperamos o valor da cela arrastada e atribuímos o valor da cela soltada com o comando setCellValue.

Exemplo 2: Arrastar e soltar como lista (permitir inserção)
Quando ondragrelease dispara a função onDragReleaseEvent, chama a outra função chamada doexample2 com a sua referência de cela soltada passa o parâmetro.

    function doexample2(cellRef){
        var originCell = dax_bridge.hoverDragging.dragObjectSource;
        var srcvalue = originCell.value;
        if(cellRef.row < dropcount){
            var relocatevalue = '';
            for(var i=dropcount; i>=cellRef.row; i--){
                relocatevalue = dropGrid.getCellValue(i, cellRef.column);
                dropGrid.setCellValue(i+1, cellRef.column, relocatevalue);
            }
            dropGrid.setCellValue(cellRef.row, cellRef.column, srcvalue);
        }else{
            dropGrid.setCellValue(dropcount, cellRef.column, srcvalue);
        }
    }

Por cada evento soltado, uma variável dropcount incrementa-se em 1. Utiliza-se para manter um registro do número total de elementos soltados. Quando uma posição soltada é menor ou igual à dropcount, os valores na fila soltada ou abaixo se aumentarão em um. O valor da posição soltada logo irá inserir-se com o valor da cela arrastada.

Exemplo 3: Arrastar e soltar como lista (efeito, cortar e colar)
Quando ondragrelease dispara a função onDragReleaseEvent, chama a outra função chamada doexample3 com a sua referência de cela soltada para o parâmetro.

    function doexample3(cellRef){
        var originCell = dax_bridge.hoverDragging.dragObjectSource;
        var srcvalue = originCell.value;
        if(cellRef.row < dropcount){
            var relocatevalue = '';
            for(var i=dropcount; i>=cellRef.row; i--){
                relocatevalue = dropGrid.getCellValue(i, cellRef.column);
                dropGrid.setCellValue(i+1, cellRef.column, relocatevalue);
            }
            dropGrid.setCellValue(cellRef.row, cellRef.column, srcvalue);
        }else{
            dropGrid.setCellValue(dropcount, cellRef.column, srcvalue);
        }
        // Eliminar o elemento soltar da lista original
        var rownum = dragGrid.getParsedDataRecordCount();
        for(var i=originCell.row; i<=rownum; i++){
            relocatevalue = dragGrid.getCellValue(i+1, originCell.column);
            dragGrid.setCellValue(i, originCell.column, relocatevalue);
        }
    }

Este exemplo é igual ao exemplo 2, com a exceção de que a cela que tem sido arrastada elimina-se automaticamente da rede.