É mais fácil pegar algo e colocar do que escrever o que você precisa levar e onde colocar. Claro, sem um mouse, ou um dispositivo semelhante, você não pode selecionar ou especificar nada, mas mesmo no estado atual das coisas, usar a ideia de arrastar e soltar é muito natural e confortável.

O escopo da ideia não são apenas lojas online, bibliotecas digitais, busca ou Sistemas de informação, mas também a área aplicada. A ideia é muito aplicável no desenvolvimento de sites e seus elementos, criados e mantidos de forma interativa, sem a participação de um programador.

Descrição da ideia

Selecione, mova e coloque - a ideia é natural e conveniente. É simplesmente incrível que não tenha nascido quando o mouse se tornou um acessório indispensável para o computador.

O exemplo mais óbvio é escolher um produto em uma loja online. Pegar o produto desejado com o mouse e arrastá-lo para o carrinho de compras é simples, natural e conveniente. Upload de arquivo: Tirar um documento da janela do navegador e colocá-lo em um elemento de página, iniciando assim a transferência do documento para o servidor, também é uma ideia prática.

Para o desenvolvedor, a ideia de "arrastar e soltar" é a manipulação dos elementos da página sem recalcular manualmente as coordenadas e tamanhos das tags, a possibilidade de selecionar vários elementos e alinhá-los, além de mover as laterais das tags do bloco.

HTML e CSS - ótimos idiomas descrições de tags e seus estilos de design, mas quando um desenvolvedor tem a capacidade de manipular interativamente os elementos da página sem recalcular manualmente as coordenadas e os tamanhos, isso torna o trabalho mais confortável e eficiente.

Fácil transferência de arquivos

"Arrastar e soltar": a tradução do inglês para o russo literalmente soa como "arrastar e soltar". Na prática, soa e funciona melhor: escolha, transfira e solte - de forma simples e natural.

Implementar transferências de arquivos em uma página para uma página, para um servidor ou para outro uso é muito simples.

Neste exemplo, vários arquivos na área de trabalho foram selecionados com o mouse (figura à esquerda). Na seleção, o botão esquerdo do mouse foi pressionado e o selecionado "foi" para a cesta. O próprio navegador mostrou como isso acontece, escreveu uma dica de “cópia” e criou os contornos dos arquivos sendo movidos.

Quando o mouse estava sobre a cesta, o visitante soltava o botão esquerdo do mouse, acontecia o evento de arrastar e soltar e na página do site (imagem inferior), o código JavaScript era capaz de receber e processar todos os arquivos que o visitante forneceu para a página (site).

Descrição da implementação

O código que executa este procedimento é muito simples. Mesmo um desenvolvedor iniciante pode repeti-lo em qualquer caso de uso.

Aqui, a interface do usuário é representada por duas tags: scPlaceFile (este é o próprio cesto onde você deseja colocar os arquivos) e scPlaceFiles (este é o resultado do processamento de arquivos, neste caso uma lista deles).

A lógica da página é a seguinte. Quando a página é carregada no navegador, o manipulador de eventos "ondrop" é atribuído na cesta - coloque, o restante dos eventos é bloqueado e não é usado.

A página funciona normalmente, mas assim que o visitante selecionar o arquivo (arquivos) e arrastá-los para a imagem da cesta, ou seja, para a tag scPlaceFile, será processado o evento “arquivos chegaram”.

Esse manipulador simplesmente exibe uma lista de arquivos. Seu número está em event.dataTransfer.files.length, e as informações sobre cada arquivo estão em event.dataTransfer.files[i].name. O que fazer com os dados recebidos é determinado pelo desenvolvedor; nesse caso, uma lista de arquivos recebidos é simplesmente formada.

Uma vez processado, o evento é bloqueado e não propagado. Isso é necessário para que o navegador não se envolva em atividades amadoras e não interfira no processamento das informações recebidas.

DnD e dados externos

Carregar imagens para o servidor em "arrastar e soltar" é uma prática comum nesta tecnologia. Normalmente, um desenvolvedor cria um formulário de upload de arquivo (1) que funciona da maneira usual (2). O visitante pode modo normal selecionar arquivos e enviá-los.

No entanto, se um visitante arrastar e soltar em um determinado local do formulário, o campo do nome do arquivo (arquivos) será preenchido automaticamente.

Isto boa decisão. É claro que é muito difícil admitir que não há mouse no computador. Mas é melhor desenvolver a interface do usuário da maneira usual e na implementação do DnD.

DnD e dados internos

Cuidar dos interesses do visitante é sempre importante, mas as preocupações do desenvolvedor também importam. Você pode implementar "arrastar e soltar" não apenas por meios padrão, mas também manipulando eventos de mouse em elementos de página.

A tarefa de calcular valores de coordenadas de tags e seus tamanhos surge constantemente. O cálculo manual é uma boa prática, mas a opção interativa é mais conveniente. Todas as tags são sempre retangulares e, ao monitorar os eventos do mouse nas laterais dos elementos, você pode criar a capacidade de mover automaticamente os elementos para o lugar certo na página ou alterá-los.

Manipulando o evento de clique do botão do mouse - lembrando as coordenadas do site de clique, por exemplo, um dos lados do elemento. Mova o mouse - o lado se move na direção desejada. Soltar o botão do mouse - o lado pára e suas coordenadas mudam. Dessa forma, você pode alterar a posição do elemento ou seu tamanho.

Não é formalmente arrastar e soltar, mas o efeito é semelhante e prático. Ao criar manipuladores universais para qualquer elemento de página, você pode obter um bom resultado interativo, acelerar o desenvolvimento e simplificar o código.

Programação visual e manual

Um mouse em um computador e dedos em um smartphone são abordagens completamente diferentes para a implementação da interface do usuário (visitante, desenvolvedor). É um requisito completamente natural e moderno para compatibilidade entre navegadores.

Tudo isso junto dificulta a criação de páginas, mas aplicando a ideia de arrastar e soltar nela forma padrão, usando seus eventos, combinando essa ideia com os eventos usuais nos elementos, você pode implementar um mecanismo no qual a criação da página ocorrerá visualmente.

Agora vamos ver a seleção de um elemento ou elementos. Fato de seleção - a aparência de um menu de contexto, por exemplo, o objetivo é alinhar o selecionado (esquerda, direita, centro), ou distribuir elementos vertical ou horizontalmente com o mesmo passo, ou alterar seu tamanho (mínimo, máximo).

O recálculo automático de coordenadas e dimensões é preferível ao manual. Menos erros - o objetivo é alcançado mais rapidamente. Além disso, você pode criar uma página em um navegador, salvar a posição e o tamanho dos elementos. Ao abrir esta página em um smartphone, você pode corrigir as coordenadas e dimensões e lembrá-las para modelo específico versão para smartphone ou navegador.

Portanto, a mesma página sem conformidade manual com o requisito de compatibilidade entre navegadores terá dados diferentes para exibir vários dispositivos e em diferentes navegadores.

Se você permitir que o visitante realize esses procedimentos por conta própria, bem como selecionar os elementos de página necessários entre os fornecidos pelo desenvolvedor, é possível garantir a compatibilidade entre navegadores e a funcionalidade necessária da página, levando em consideração as opinião do usuário.

O recurso Arrastar e Soltar pode ajudar a aumentar o desempenho do seu iPad. Veja como você pode usá-lo.

Assim, você pode mover um arquivo de um serviço de armazenamento em nuvem para outro, copiar texto do Safari para um aplicativo de edição de texto para adicionar uma cotação ou criar cópia de segurança certas fotos no aplicativo de armazenamento de arquivos.

Como arrastar e soltar fotos, arquivos e texto

1. Toque e segure a foto, arquivo ou texto destacado que deseja arrastar para outro aplicativo.

2. Arraste o elemento para o local desejado em esta aplicação ou outro que você tenha aberto em Slide Over ou Split View e solte.

Como arrastar e soltar várias fotos ou arquivos de uma só vez

1. Toque e segure uma das fotos ou arquivos que deseja arrastar.

2. Enquanto arrasta o item atual, toque em outra foto ou arquivo que você também deseja arrastar. Faça novamente com quantos elementos você quiser mover.

3. Arraste todos os objetos selecionados para o local designado em outro aplicativo que você abriu em Slide Over ou Split View e solte-os.

Como arrastar texto de um aplicativo para outro

1. Toque e segure na parte do texto que você deseja arrastar para selecioná-lo.

2. Use pontos de seleção para destacar o restante do texto que deseja arrastar.

3. Pressione e segure o texto selecionado.

4. Arraste o texto para o aplicativo onde deseja colocá-lo e solte-o.

Como alterar a posição dos ícones de vários aplicativos ao mesmo tempo usando "Arrastar e Soltar"

Embora a maioria das funcionalidades de arrastar e soltar do iOS funcione apenas no iPad, esse truque realmente funciona no iPhone e no iPad. Isso permite que você organize a localização dos aplicativos na tela inicial usando « Arraste e Solte" em vez de movê-los um por um.

1. Toque e segure o ícone do aplicativo que deseja reposicionar na tela inicial.

2. Toque em aplicativos adicionais que você também deseja mover.

3. Arraste esses aplicativos para a página ou pasta onde você deseja que eles estejam e solte-os.

182

Neste exemplo, selecionamos um elemento div e o tornamos móvel chamando-o método arrastável(). Conforme mostrado na figura abaixo, no documento aberto, o elemento assume sua posição usual, mas após isso pode ser movido com o ponteiro do mouse para qualquer lugar na janela do navegador:

O recurso de arrastar e soltar é útil por si só, mas é ainda mais útil quando usado em conjunto com a interação Droppable, descrita a seguir.

A interação arrastável é implementada somente através do uso de marcação HTML específica e estilos CSS. Isso significa que essa funcionalidade funcionará em praticamente qualquer navegador, mas os elementos dotados dela não poderão funcionar com recursos nativos semelhantes de arrastar e soltar. sistemas operacionais.

As operações de arrastar e soltar definidas pela especificação HTML5 geralmente são implementadas usando mecanismos nativos do sistema operacional. Se você estiver usando o mecanismo de arrastar e soltar da interface do usuário do jQuery, é melhor desabilitar os equivalentes HTML5 para evitar conflitos. Para fazer isso, defina o atributo arrastável do elemento body do documento como false.

Personalizando a interação arrastável

Existem muitas opções de personalização para a interação Draggable. As propriedades mais importantes cobertas nas seções a seguir estão resumidas na tabela abaixo:

Propriedades de interação arrastáveis

Propriedade	Descrição
eixo	Restringe o movimento a certas direções. O valor padrão é false, o que significa que não há restrições, mas você também pode especificar o valor "x" (mover apenas ao longo do eixo x) ou "y" (mover apenas ao longo do eixo y)
contenção	Restringe a localização do elemento flutuante a uma área específica da tela. Os tipos de valor com suporte são descritos na tabela abaixo, com o exemplo correspondente. O valor padrão é false, significa que não há restrições
atraso	Especifica a quantidade de tempo que um elemento deve ser arrastado antes de se mover. O valor padrão é 0, o que significa que não há atraso
distância	Especifica a distância que o usuário deve arrastar um elemento de sua posição inicial antes que ele realmente se mova. O valor padrão é 1 pixel
rede	Força a ligação do elemento movido às células da grade. O valor padrão é false, o que significa que não há vinculação

Restrição de direções de movimento

Existem várias maneiras de restringir o movimento de um elemento a determinadas direções. A primeira delas é usar a opção de eixo, que permite limitar a direção do movimento ao eixo X ou Y. Um exemplo é mostrado abaixo:

...

Executar Exemplo

Neste exemplo, definimos dois elementos div, os selecionamos com jQuery e chame o método draggable(). Este método recebe um objeto que inicialmente restringe ambos os divs a se moverem na direção x. Ao aplicar o método jQuery filter(), podemos selecionar o elemento dragV sem que o jQuery pesquise todo o documento novamente e configurá-lo para um movimento permitido diferente direção - ao longo do eixo Y. Assim, obtemos um documento no qual um elemento div só pode ser arrastado na direção vertical e o outro - apenas na direção horizontal. O resultado é mostrado na figura:

Restringindo a área permitida para mover um elemento

Você também pode limitar a área da tela onde você pode arrastar um elemento. Para isso, é utilizada a opção de contenção. Os formatos de valor que podem ser especificados nesta opção estão descritos na tabela abaixo:

Um exemplo de uso da opção de contenção é mostrado abaixo:

...

Executar Exemplo

Neste exemplo, ambos os elementos são restringidos para se moverem, de modo que só podem ser arrastados para dentro elemento pai, que é um elemento div de tamanho fixo. Para uma das divs móveis com a opção de eixo digitada restrição adicional, o que significa que ele só pode se mover horizontalmente dentro do elemento pai. O resultado está ilustrado na figura:

Restringindo a capacidade de mover um elemento para células de grade

A opção de grade permite definir a vinculação do elemento movido às células da grade. Esta opção aceita uma matriz de dois elementos que especifica a largura e a altura das células da grade em pixels. Um exemplo de uso da opção de grade é mostrado abaixo:

...

Executar Exemplo

Neste exemplo, a grade é definida para 100 pixels de largura e 50 pixels de altura. Quando você arrasta um elemento, ele "salta" de uma célula (invisível) para outra. O efeito de encaixe é um ótimo caso de uso para a funcionalidade de interação, mas é difícil transmitir com capturas de tela.

Você pode criar um efeito de encaixe para apenas uma direção definindo o eixo de movimento livre como 1. Por exemplo, se você definir a opção de grade como , o elemento se ajustará às células de grade de 100px de largura ao se mover horizontalmente, mas se moverá livremente na vertical .

Atraso de viagem

Existem duas opções que permitem atrasar o arrastamento de um elemento flutuante. Com a opção delay, você pode definir o tempo em milissegundos que o usuário deve arrastar o ponteiro do mouse antes que o elemento seja realmente movido. Outro tipo de atraso é fornecido pela opção distance, que especifica a distância, em pixels, que o usuário deve arrastar o ponteiro do mouse antes que um elemento o siga.

Um exemplo de uso de ambas as configurações é mostrado abaixo:

...

Executar Exemplo

Neste exemplo, existem dois elementos flutuantes, um dos quais possui um atraso definido com a opção de atraso e o outro com a opção de distância.

No caso do atraso especificado pela opção de atraso, o usuário deve arrastar o tempo especificado antes de realmente mover o elemento. Neste exemplo, a duração desse intervalo é de 1.000 ms. Não é necessário mover o mouse durante este tempo, mas o botão do mouse deve permanecer pressionado durante todo o período de atraso, após o qual o elemento pode ser movido movendo o mouse. Depois que o tempo de atraso tiver decorrido, o elemento que está sendo movido se ajustará à posição do ponteiro do mouse, sujeito às restrições impostas pelas opções de grade, região e eixo discutidas anteriormente.

A opção de distância tem um efeito semelhante, mas neste caso o usuário deve arrastar o ponteiro do mouse pelo menos o número especificado de pixels em qualquer direção da localização inicial do elemento. O item que está sendo movido pulará para o local atual do ponteiro.

Se ambas as configurações forem aplicadas ao mesmo elemento, o elemento que está sendo movido não se moverá até que ambos os critérios de atraso sejam atendidos, ou seja, até que a tentativa de arrastar o elemento dure o tempo especificado e até que o ponteiro do mouse mova o número especificado de pixels.

Usando métodos de interação arrastáveis

Todos os métodos definidos para interação Draggable fazem parte do conjunto de métodos básicos que você já viu em widgets. Métodos específicos para a interação Draggable não são fornecidos, portanto, não os abordaremos em detalhes. A lista de métodos disponíveis é mostrada na tabela abaixo:

Usando eventos de interação arrastáveis

A interação arrastável suporta um conjunto simples de eventos que notificam quando um elemento está sendo arrastado. Esses eventos estão descritos na tabela abaixo:

Tal como acontece com os eventos de widget, esses eventos também podem ser reagidos. Um exemplo de manipulação dos eventos start e stop é mostrado abaixo:

...

Executar Exemplo

Este exemplo usa os eventos start e stop para alterar o conteúdo de texto de um elemento durante o processo de arrastar. Essa vantagem vem do fato de que a interação Draggable é implementada inteiramente usando HTML e CSS: você pode usar jQuery para alterar o estado de um elemento flutuante mesmo enquanto ele está se movendo pela tela.

Usando a interação Droppable

Em algumas situações, arrastar um elemento sozinho pode ser suficiente, mas é mais útil quando usado em conjunto com a interação Droppable.

Os elementos aos quais a interação Soltável foi aplicada (elementos de aceitação) ganham a capacidade de aceitar elementos Soltáveis ​​criados com a interação Arrastável.

Os elementos receptores são criados com método droppable(), mas para obter funcionalidades úteis, você precisará criar manipuladores de eventos dentre aqueles definidos para esse tipo de interação. Os eventos disponíveis são mostrados na tabela abaixo:

Eventos de interação descartáveis

Evento	Descrição
crio	Ocorre quando uma interação Droppable é aplicada a um elemento
ativar	Ocorre quando o usuário começa a arrastar um elemento flutuante
desativar	Ocorre quando o usuário para de arrastar um elemento flutuante
sobre	Ocorre quando o usuário arrasta um elemento flutuante sobre o elemento receptor (mas assumindo que o botão do mouse ainda não foi liberado)
Fora	Ocorre quando o usuário arrasta um elemento flutuante para fora do elemento receptor
derrubar	Ocorre quando o usuário deixa um elemento flutuante no elemento receptor

Um exemplo de criação de um elemento de recebimento simples que possui um único manipulador de evento drop é dado abaixo:

...

Executar Exemplo

Neste exemplo, um elemento div é adicionado ao documento, cujo conteúdo de texto é representado pela string "Deixe aqui". Selecionamos este elemento usando jQuery e chamamos o método droppable(), passando para ele um objeto settings que define um handler para o evento drop. A resposta a este evento é alterar o texto do elemento flutuante usando o método text().

A experiência interativa de arrastar e soltar criada neste exemplo é a mais simples, mas fornece um contexto útil para explicar as possibilidades. trabalho conjunto Interações que podem ser arrastadas e soltas. As diferentes etapas do processo de arrastar e soltar elementos são ilustradas na figura:

Tudo isso parece muito simples. Arrastamos o elemento que está sendo movido até que esteja acima do elemento receptor e o soltamos. O elemento solto permanece onde foi deixado e seu conteúdo de texto muda em resposta à ocorrência do evento soltar. As seções a seguir mostram como usar outros eventos de interação Droppable para melhorar a experiência do usuário.

Destaque do objeto de recebimento de destino

Usando os eventos de ativação e desativação, você pode destacar o objeto receptor de destino quando o usuário iniciar o processo de arrastar um elemento. Em muitas situações, essa ideia é muito proveitosa porque dá ao usuário uma indicação confiável de quais elementos fazem parte do modelo de arrastar e soltar. O exemplo relevante é mostrado abaixo:

... $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Dropped ") ), active: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), desative: function() ( $("#droppable ").css("borda", "").css("cor de fundo", ""); ) )); )); ... Execute o exemplo

Assim que o usuário começa a arrastar o elemento, o evento activate - associado ao nosso elemento receptor - é acionado, e a função do manipulador usa o método css() para alterar borda da propriedade CSS e cor de fundo deste elemento. Como resultado, o elemento receptor de destino é destacado, indicando ao usuário que existe uma conexão entre ele e o elemento que está sendo movido.

O evento deactivate é usado para remover os valores das propriedades CSS do elemento receptor e redefini-lo assim que o usuário soltar o botão do mouse. (Esse evento é acionado sempre que o arrastamento de um elemento é interrompido, independentemente de o elemento arrastado ser deixado no elemento receptor ou não.) Esse processo é ilustrado na figura:

Manipulação de Sobreposição de Elementos

A tecnologia de arrastar e soltar pode ser aprimorada adicionando e eliminando a manipulação de eventos a ela. O evento over ocorre quando 50% do elemento que está sendo movido está acima de qualquer parte do elemento receptor. O evento out é acionado quando elementos anteriormente sobrepostos não se sobrepõem mais. Um exemplo de resposta a esses eventos é mostrado abaixo:

$(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Dropped") ) , active: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), desative: function() ( $("#droppable"). css("border", "").css("background-color", ""); ), over: function() ( $("#droppable").css(( border: "medium double red", backgroundColor : "red" )); ), out: function() ( $("#droppable").css("border", "").css("background-color", ""); ) )); ) ); Executar Exemplo

As mesmas funções do manipulador são usadas aqui como no exemplo anterior, mas neste caso elas estão associadas aos eventos over e out. Quando pelo menos 50% do elemento flutuante se sobrepõe ao elemento receptor, ele é enquadrado e sua cor de fundo muda, conforme mostrado na figura:

Esse limite de 50% é chamado de limite de tolerância, que pode ser definido ao criar o elemento receptor, como será mostrado a seguir.

Configuração de interação descartável

A interação Droppable tem várias propriedades que você pode modificar para personalizar seu comportamento. Essas propriedades estão listadas na tabela abaixo:

Propriedades de interação descartáveis

Propriedade	Descrição
Desativado	Se esta opção for verdadeira, a funcionalidade de interação Droppable será inicialmente desabilitada. O valor padrão é falso
aceitar	Reduz o conjunto de elementos flutuantes aos quais o elemento receptor responderá. O valor padrão é *, corresponde a qualquer elemento
activeClass	Define uma classe que será atribuída em resposta ao evento de ativação e removida em resposta ao evento de desativação
classe hover	Define uma classe que será atribuída em resposta a um evento over e removida em resposta a um evento out.
tolerância	Especifica o grau mínimo de sobreposição em que o evento over ocorre

Restrição de elementos flutuantes permitidos

Você pode limitar o conjunto de elementos droppable que serão aceitos por um elemento que tenha a funcionalidade de interoperabilidade Droppable usando a opção accept. O valor da opção accept deve ser um seletor. Como resultado desse evento, as interações Droppable ocorrerão apenas se o elemento que está sendo movido corresponder ao seletor especificado. O exemplo relevante é mostrado abaixo:

...

Executar Exemplo

Neste exemplo, há dois elementos flutuantes com IDs drag1 e drag2. Ao criar um elemento de aceitação, utiliza-se a opção de aceitação, com a qual indicamos que apenas o elemento drag1 será um elemento flutuante aceitável.

Ao arrastar o elemento drag1, você verá o mesmo efeito dos exemplos anteriores. Os eventos de ativação, desativação, over e out serão acionados no elemento receptor nos momentos apropriados. Ao mesmo tempo, se você arrastar um elemento drag2 que não corresponde ao seletor especificado no parâmetro accept, esses eventos não serão acionados. Este elemento pode ser movido livremente, mas não será aceito pelo elemento receptor.

Observe a mudança em como você seleciona um elemento flutuante aceitável para chamar o método text(). Quando havia apenas um elemento flutuante no documento, o atributo id era suficiente para isso:

Soltar: function() ( $("#arrastável").text("Descartado")),

Neste exemplo, existem dois elementos flutuantes, e selecionar pelo atributo id não dará o resultado desejado, pois o texto neste caso sempre mudará no mesmo elemento flutuante, independente de qual seja aceitável para o elemento receptor.

A solução é usar o objeto ui que o jQuery UI fornece como um argumento adicional para cada manipulador de eventos. A propriedade draggable do objeto ui retorna um objeto jQuery contendo o elemento que o usuário está arrastando ou tentando soltar no elemento alvo, permitindo que o elemento desejado seja selecionado da seguinte forma:

Soltar: function(evento, ui) ( ui.draggable.text("Descartado")),

Alterando o limite de sobreposição

Por padrão, o evento over só é acionado quando pelo menos 50% do elemento que está sendo movido se sobrepõe ao elemento receptor. A quantidade dessa sobreposição de limite pode ser alterada usando a opção de tolerância, que pode assumir os valores mostrados na tabela abaixo:

Os dois valores que mais uso, ajuste e toque, são os que fazem mais sentido para os usuários. Utilizo o valor de ajuste quando o elemento arrastado deve permanecer na área do elemento receptor onde foi movido, e o valor de toque quando o elemento arrastado deve retornar à sua posição original (um exemplo será dado posteriormente). Um exemplo de uso dos parâmetros de ajuste e toque é mostrado abaixo:

O valor clone diz ao jQuery UI para criar uma cópia do elemento flutuante junto com todo o seu conteúdo e usar o resultado como um elemento auxiliar. O resultado é mostrado na figura:

O elemento auxiliar é removido quando o usuário solta o botão do mouse sobre o elemento que está sendo movido, deixando o elemento que está sendo movido e o elemento receptor em suas posições originais.

Conforme mostrado na figura, o elemento flutuante original permanece em seu lugar e apenas o elemento auxiliar se move pela tela seguindo o ponteiro do mouse. Se o tamanho do elemento que está sendo movido for grande, como em nosso exemplo, ele cobrirá o restante dos elementos do documento, portanto, será difícil para o usuário rastrear até mesmo a posição do elemento receptor. Este problema pode ser resolvido fornecendo uma função como o valor da opção auxiliar, conforme mostrado no exemplo abaixo:

... $(function() ( $("div.arrastável")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover" )); )); ... Execute o exemplo

Quando o usuário começa a arrastar um elemento, o jQuery UI chama uma função, parâmetro helper e usa o elemento retornado como um objeto móvel. Neste caso, estou usando jQuery para criar o elemento img. O resultado é mostrado na figura:

A pequena imagem atua como um espaço reservado para o elemento flutuante, tornando muito mais fácil acompanhar outros elementos no documento.

O objeto ui que o jQuery UI passa para eventos de interação Droppable contém uma propriedade auxiliar, e essa propriedade pode ser usada para manipular o elemento auxiliar enquanto ele está sendo arrastado. Um exemplo de uso desta propriedade em conjunto com os eventos over e out é mostrado abaixo:

... $(function() ( $("div.arrastável")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "thick solid #27e6ed") ) , out: function(evento, ui) ( ui.helper.css("border", "") ) )); )); ...

Aqui os eventos over e out e a propriedade ui.helper são usados ​​para exibir uma borda ao redor do elemento auxiliar quando ele se sobrepõe ao elemento host. O resultado é mostrado na figura:

Encaixe nas bordas dos elementos

Através da opções de encaixeé possível conseguir que o elemento que está sendo movido seja "atraído" para as bordas dos elementos próximos aos quais ele passa. Esta opção recebe um seletor como seu valor. O elemento flutuante se encaixará nas bordas de qualquer elemento que corresponda ao seletor especificado. Um exemplo de uso da opção snap é mostrado abaixo:

Executar Exemplo

Quando um elemento móvel se aproxima de um dos elementos combinados, ele é meio que "puxado" para ele de tal forma que suas bordas adjacentes se tocam. Para tal vinculação, você pode selecionar qualquer elemento, não apenas o receptor. Neste exemplo, adicionei um elemento div e defini a opção snap para um valor que seleciona esse elemento no documento, bem como o elemento receptor.

Existem algumas subopções que permitem ajustar como os elementos se comportam em relação à ancoragem. Uma delas é opção snapMode. Ele pode ser usado para especificar o tipo de associação. Os seguintes valores são permitidos: interno(encaixe nas bordas internas dos elementos), exterior(encaixe nas bordas externas dos elementos) e Ambas(ajustar a todas as arestas; padrão).

Opção snapTolerance permite especificar até que ponto o elemento flutuante deve se aproximar da borda do elemento de destino antes que ocorra o encaixe. O valor padrão é 20, o que significa 20 pixels. O exemplo usa um valor de 50, que corresponde a uma âncora a uma distância maior. É muito importante escolher o valor certo para esta opção. Se o valor da opção snapTolerance for muito baixo, o usuário pode não notar o efeito de encaixe e, se for muito alto, o elemento que está sendo movido começará a pular inesperadamente, encaixando-se em elementos distantes.

Para a biblioteca VCL, a Borland implementou sua própria versão da interface Drag&Drop (traduzida como "arrastar"). Esta interface é interna - você pode enviar e receber quaisquer controles Delphi dentro do formulário "(exceto o próprio formulário). É implementado sem usar as funções correspondentes da API do Windows - eles devem ser usados ​​ao organizar a comunicação com outras tarefas arrastando e soltando .

Ao pressionar o botão esquerdo do mouse sobre o controle, podemos "arrastá-lo" para qualquer outro elemento. Do ponto de vista do programador, isso significa que nos momentos de arrastar e soltar a tecla, são gerados determinados eventos que transmitem todas as informações necessárias - um ponteiro para o objeto arrastado, coordenadas atuais do cursor, etc. O receptor de eventos é o elemento em que o este momento o cursor está localizado. O manipulador para tal evento deve informar ao sistema se o controle determinado aceita o "envio" ou não. Quando o botão é liberado sobre o controle do receptor, mais um ou dois eventos são disparados, dependendo da prontidão do receptor.

Cancelar Arrastar Cancela a operação atual de arrastar e soltar ou arrastar e encaixar.

Função FindDragTarget (const Pos: TPoint ;AllowDisabled: Boolean ): TControl ;

A função retorna um objeto da classe base TControl , que se refere à posição da tela com as coordenadas especificadas pelo parâmetro Pos. Esta função é usada para determinar o destinatário potencial de uma operação de arrastar e soltar ou arrastar e encaixar. Se não houver controle de janela para a posição especificada, a função retornará nada . O parâmetro AllowDisabled determina se os objetos desabilitados serão considerados.

Função IsDragObject(Sender: TObject ): Boolean ;

A função determina se o objeto especificado no parâmetro Sender é descendente da classe TDragObject . Esta função pode ser usado como o parâmetro Source nos manipuladores de eventos OnDragOver e OnDockOver para determinar se o objeto arrastado será aceito. Também funciona IsDragObjectpode ser usado como o parâmetro Source nos manipuladores de eventos OnDragDrop e OnDockDrop para interpretar corretamente o objeto arrastado.

DragMode, propriedades DragCursor, métodos BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag, parâmetro Accept

O processo de arrastar informações de um objeto para outro com o mouse é amplamente utilizado no Widows. Você pode mover arquivos entre pastas, mover as próprias pastas e muito mais.

Todas as propriedades, métodos e eventos associados ao processo de arrastar e soltar são definidos na classe TControl, que é o pai de todos os componentes visuais do Delphi. Portanto, eles são comuns a todos os componentes.

O início do arrasto é determinado pela propriedade DragMode, que pode ser definida em tempo de design ou programaticamente igual a dmManual ou dmAutomatic. O valor de dmAutomatic (automatic) determina o início automático do processo de arrastar quando o usuário clica com o botão do mouse sobre o componente. No entanto, neste caso, o evento OnMouseDown associado ao usuário pressionando o botão do mouse não ocorre para este componente.

A interface para transferir e receber componentes apareceu há muito tempo. Ele fornece interação entre dois controles durante a execução do aplicativo. Neste caso, todas as operações necessárias podem ser realizadas. Apesar da simplicidade de implementação e da idade de desenvolvimento, muitos programadores (especialmente iniciantes) consideram esse mecanismo obscuro e exótico. No entanto, o uso de arrastar e soltar pode ser muito útil e fácil de implementar. Agora vamos verificar isso.

Para que o mecanismo funcione, dois controles devem ser configurados de acordo. Um deve ser a fonte (Source), o segundo - o receptor (Target). Nesse caso, a fonte não se move para nenhum lugar, mas apenas é registrada como tal no mecanismo.

Acredite em mim, é fácil o suficiente para transformar Coordenadas X,Y, passado nos parâmetros dos eventos OnDragOver e OnDragDrop, em coordenadas de formulário.

Trabalhe com as propriedades Left e Top do componente sobre o qual o cursor está passando. Vou dar um exemplo simples. Coloque um componente Memo no formulário e defina sua propriedade Align como alTop. Coloque um painel no formulário, também defina a propriedade Align para alTop e defina a propriedade Height para um valor pequeno, digamos 6 ou 7 pixels. Defina DragMode como dmAutomatica e DragCursor como crVSplit. Coloque outro componente Memo e defina Align to alClient. Selecione os dois Memos ao mesmo tempo, o painel e crie um manipulador de eventos OnDragOver comum, conforme mostrado abaixo:

Recentemente tive a ideia de desenvolver um jogo para android. Para começar, decidi escrever xadrez. pensei que a tecnologia Arraste e Solte perfeito para implementar o mecanismo de movimento de formas. Para os não iniciados, noto que o método de arrastar e soltar é na possibilidade de arrastar alguns objetos gráficos sobre outros e realizar uma ou outra ação após a liberação. O exemplo mais simples- remova o atalho da área de trabalho do seu PC arrastando-o para a lixeira. Ao "jogar" o atalho no lixo, informamos ao sistema que queremos fazer com que esses dois objetos interajam. O sistema recebe nosso sinal e decide qual ação deve tomar. Arrastar e soltar tornou-se difundido devido à sua clareza intuitiva. Essa abordagem é apoiada por nossa experiência de interação com objetos do mundo real e funciona muito bem em um ambiente virtual. Já no xadrez, com o recurso de arrastar e soltar é tecnologicamente mais fácil determinar a célula onde o usuário arrastou a peça, pois não é necessário calcular o número da célula a partir das coordenadas do ponto de lançamento. Este trabalho será assumido pela máquina virtual.

Objetivos do uso da tecnologia Drag n Drop

Usar a tecnologia de arrastar e soltar me permite resolver três problemas com pouco sangue:

1. Visualização do movimento. Quando o usuário toca uma forma e começa a movê-la pela tela, a forma é substituída por um desenho menor. Assim, o usuário entende que a figura está capturada.
2. Limitei a área de movimento da figura às dimensões do tabuleiro.
3. Se o usuário soltar a forma no lugar errado, ela deve retornar à sua posição original.

As tarefas estão definidas, vamos iniciar sua implementação.

Substituir ImageView ao toque

Todas as minhas formas são objetos ImageView. Infelizmente, descobriu-se que a implementação de Arrastar e Soltar no Android não permite "de imediato" substituir a imagem de um objeto quando ele é tocado. No entanto, esta tarefa é bastante solucionável por meio da API. Precisamos executar uma série de etapas simples:

1. Crie um objeto DragShadowBuilder.
2. Chame o método startDrag.
3. Oculte nosso ImageView que exibe a forma chamando o método setVisibility com o parâmetro View.INVISIBLE. Como resultado, apenas o objeto DragShadowBuilder permanecerá na tela, o que sinalizará ao usuário que a forma foi capturada.

Essas ações devem ser implementadas no manipulador OnTouchListner do objeto ImageView. Para fazer isso, substituiremos o método onTouch:

@Override public boolean onTouch(View view, MotionEvent motionEvent) ( if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData clipData= ClipData. newPlainText("" , "" ); View. DragShadowBuilder dsb= new View. DragShadowBuilder (view) ;view.startDrag(clipData, dsb, view, 0 ) ;view.setVisibility(View.INVISIBLE) ; return true ; ) else ( return false ; ) )

Tudo é muito simples. Então, com a substituição da imagem resolvida, vamos para a próxima tarefa.

Limitando a área de arrastar para a função de arrastar e soltar

Restringir a área de arrasto está relacionado a um problema. O fato é que se você soltar a forma fora do quadro, o evento drop não acontecerá, pois o usuário largou o objeto em um lugar vazio, e o objeto não tem nada para interagir. Como resultado, a figura não retornará ao seu estado original e permanecerá oculta para sempre. Já passei muito tempo lendo a documentação, mas não encontrei uma forma de limitar a área de arrasto dos objetos. A revelação veio de repente. Não preciso limitar a área de forma alguma, preciso saber se o usuário liberou a figura corretamente ou não.

Determinando a versão correta
Encontrei respostas para minhas perguntas na seção "tratamento de eventos de arrastar final" no site de desenvolvedores do Android. Aqui estão alguns pontos-chave:

1. Quando o usuário termina de arrastar, um evento ACTION_DRAG_ENDED é acionado no manipulador DragListeners.
2. No DragListener, você pode obter informações mais detalhadas sobre a operação de arrastar chamando o método DragEvent.getResult().
3. Se o DragListener retornar true em resposta a um evento ACTION_DROP, a chamada getResult também retornará true, caso contrário, retornará false.

Então eu preciso pegar o evento ACTION_DRAG_ENDED e chamar o método getResult. Se retornar false, o usuário arrastou a forma para fora do quadro e preciso tornar o ImageView visível.

@Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( containsDragable= false ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( contémDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) ; ) ) else if (dragAction= = DragEvent. ACTION_DROP& amp;& amp; contémDragable) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; ) private boolean dropEventNotHandled(DragEvent dragEvent) ( return ! dragEvent. getResult( ) ; )

Agora o usuário pode liberar a figura em qualquer lugar, e nada de terrível acontecerá.

Determinação de movimentos permitidos

A última parte do artigo é dedicada a verificar a validade do movimento que o usuário está tentando fazer. Antes de discutir este tópico em detalhes, farei uma pequena observação explicando a estrutura da minha aplicação. O tabuleiro de damas é representado como um TableLayout, e cada célula é descendente de um LinearLayout e possui um OnDragListener.

Além disso, cada OnDragListener se refere a um objeto "mediador", que cuida da interação dos objetos do jogo e lembra a posição da célula atual.

Quando o usuário arrasta uma forma sobre uma célula, as seguintes ações são possíveis:

1. Usando o evento ACTION_DRAG_ENTERED para definir a variável 'containsDraggable' como true.
2. Usando o evento ACTION_DRAG_EXITED para definir a variável 'containsDraggable' como false.
3. Usando o evento ACTION_DROP para consultar o middleware se uma forma pode ser colocada nesta célula.

Abaixo está o código que implementa a lógica descrita

@Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( containsDragable= false ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( contémDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) ; ) ) else if (dragAction= = DragEvent.ACTION_DROP& amp;& amp; contémDragable) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; )

Como você pode ver, independentemente de a movimentação ser válida ou não, o ImageView é definido para o estado visível. Eu queria que o usuário visse a forma se mover. Anteriormente mencionei que a célula é filha de LayoutView. Isso é feito para facilitar a movimentação do ImageView de uma célula para outra. Abaixo está o código para o método checkForValidMove, que mostra como o ImageView é movido.

private void checkForValidMove(ChessBoardSquareLayoutView view, View dragView) ( if (mediator. isValidMove(view) ) ( ViewGroup owner= (ViewGroup) dragView. getParent() ; owner. removeView(dragView) ; view. addView(dragView) ; view. setGravity (Gravity.CENTER) ;view.showAsLanded() ;mediator.handleMove(view) ; ) )

Espero que este artigo o ajude a desenvolver seus próprios projetos.