Arrastando e Soltando Informações / Drag And Drop

.html ››
Parent Previous Next

Arrastando e Soltando informações / Drag and Drop


Arrastar e Soltar, do inglês "Drag and Drop", é a ação de clicar em um objeto virtual e "arrastá-lo" a uma posição diferente ou sobre um outro objeto virtual. De maneira geral, ele pode ser usado para invocar diversos tipos de ações, ou criar vários tipos de associações entre dois objetos abstratos.


A sequência básica de ações relacionadas ao drag-and-drop é:


Fluxo de acontecimento


No exemplo a seguir, o usuário iniciou o processo drag-and-drop agarrando o objeto preto (1 na figura), arrastando o mouse até o objeto vermelho (3 na figura) e soltando o botão.


O fluxo segue na seguinte ordem:


Informações e Ações em uma operação drag-and-drop


Para que uma operação Drag-And-Drop aconteça, é necessário haver ao menos uma informação e ao menos uma ação capaz de lidar com ela. 


Informações e ações podem existir tanto no objeto Drag quanto no objeto Drop: 


Informações e ações estão atreladas a um DataType, isto é, a uma cadeia de caracteres que define o tipo de dados que é arrastado.


DataTypes padrões do Firecast

O programador pode inventar qualquer DataType, porém existem os seguintes que são padrões do Firecast:


DataType padrão

Valor transportado

text

Uma cadeia de caracteres, um texto qualquer.

imageURL

Uma cadeia de caracteres que contém uma URL de uma imagem.

player

Um objeto Jogador

players

Array de objeto Jogador

character

Um objeto Personagem

characters

Array de objeto Personagem

libraryItem

Um objeto BibliotecaItem

libraryItens

Array de objeto BibliotecaItem

sceneUnitClass

Um objeto SceneUnitClass

sceneUnitClasses

Array de objeto SceneUnitClass

imageFile

A table containing the following attributes:

  • name - String with the name of the file.
  • mimeType - String with the MIME type of the image (examples: image/jpeg, image/png)
  • stream - A read-only Stream object containing the image file bytes.

imageFiles

An array of tables with the same structure as the "imageFile".


Observação: Ao utilizar os dataTypes padrões, o RRPG valida e exige que sejam transportados valores adequados conforme a tabela acima.



Exemplos


Exemplo 1 - Arrastando um texto de um Label

Experimente arrastar o label para a caixa de digitação de mensagens e comandos do RRPG.



<label text="Me arraste!" top="150" hitTest="true">

    <event name="OnStartDrag">

        drag:addData("text", "Texto que será arrastado deste label!");

    </event>

</label>



Exemplo 2 - Arrastando uma imagem e um texto de um Label

Experimente arrastar o label para o log do chat do RRPG!



<label text="Me arraste!" top="150" hitTest="true">

    <event name="OnStartDrag">

        drag:addData("text", "Texto que será arrastado deste label!");

        drag:addData("imageURL", "http://www.rrpg.com.br/wp-content/uploads/2013/05/cropped-Untitled-2.png");

    </event>

</label>




Exemplo 3 - Um controle que captura arraste de imagens.

Arraste uma imagem do browser Chrome ou do jogador para este controle.


<rectangle left="150" top="150"

           width="150" height="150"

           strokeColor="yellow" strokeSize="1"

           color="none">

           

    <image name="imgImagem" align="client" hitTest="true">

        <event name="OnStartDrop">

            drop:addAction("imageURL",

                function(value)

                    self.imgImagem.src = value;

                end);

        </event>

    </image>

   

</rectangle>



Exemplo 4 - Um controle que captura arraste de Jogadores.

Arraste um jogador da mesa para este controle!


<rectangle left="150" top="150"

           width="150" height="150"

           strokeColor="yellow" strokeSize="1"

           color="none"

           hitTest="true">

           

    <event name="OnStartDrop">

        drop:addAction("player",

            function(value)

                showMessage("O login deste jogador é: " .. value.login);      

            end);

    </event>           

</rectangle>


Exemplo 5 - Arrastando uma ação à partir de um botão

Arraste este botão para um jogador da mesa!


<button left="150" top="150" text="meArraste">

    <event name="OnStartDrag">

        drag:addAction("player",

            function(destValue)

                showMessage("Você me arrastou para o jogador: " .. destValue.login);

            end);

    </event>

</button>

Created with the Personal Edition of HelpNDoc: Generate EPub eBooks with ease