web-development-kb-pt.site

Quais são os idiomas comuns para a parte de soltar de uma operação de arrastar e soltar?

Só estou preocupado aqui com a outra metade de uma operação de D% D, a queda. Quais são os idiomas comuns para se comunicar com um usuário que ele pode abandonar? E quais são os "melhores" e em que situações?

Em particular, gostaria de conhecer aqueles que comunicam algo ao usuário antes e depois da ocorrência do arrasto. Estes podem ser visuais ou 'táteis' (alterações do cursor do mouse).

drag-n-dropidioms
12
shemnon
  • Indicar possíveis destinos de queda
  • Mostrar uma visualização ao vivo dos resultados
  • Mostrar o que está sendo arrastado em tempo real

alt text

  • Se você não pode soltar algo em algum lugar, explique o motivo para os usuários em um pop-up perto do cursor:

alt text

  • Mantenha seus alvos de queda grandes! Arrastar e soltar já é uma violação flagrante da lei de Fritz; não há necessidade de piorar.
5
Robert Fraser

Vi aplicativos que mostram um esboço onde você pode soltar.

Isto é da página do widget wordpress

Wordpress widget page
(fonte: srulytaber.com )

10
Sruly

Uma abordagem comum é transformar o cursor em um cursor "não pode soltar" quando você está sobre todo o resto.

A lógica seria:

  1. Iniciar arrastar.
  2. Vire o cursor para "não pode soltar".
  3. Enquanto arrasta, verifique se há algo que possa aceitar a queda e depois vire o cursor para "pode ​​soltar".
  4. Soltar e redefinir o cursor.

NOTA: Não estou necessariamente defendendo isso, mas mostra ao usuário que eles estão no meio de uma operação de arrastar/soltar, além de indicar onde a queda é válida.

7
ChrisF

Você pode destacar levemente os locais de soltar assim que o usuário estiver arrastando um item. Dessa forma, você pode chamar a atenção para os locais de queda.

O pré-requisito para isso é, obviamente, que você mostre o que é arrastável em primeiro lugar. Lá esta pergunta com resposta para isso.

5
Gamlor

Às vezes, o alvo de descarte está dentro de um conjunto de organizados linearmente objetos. Depois que o item é descartado, os objetos que seguem o alvo de descarte serão movidos para liberar espaço para o novo objeto. Nesse caso, o ponto de inserção geralmente é indicado por uma linha fina entre os dois objetos que serão separados para criar espaço.

Por exemplo, em quase qualquer GUI que usa um mouse, o texto pode ser selecionado e arrastado de uma parte de um documento para outra. O ponto de inserção é indicado por uma linha fina entre dois caracteres.

Esse também é o caso do fila do Netflix discutido anteriormente. Além de uma linha fina, o Netflix usa uma seta preta para indicar para onde o filme irá.

 Thundercats: Season 1: Vol. 1: Disc 3     
 .....................................     
 Thundercats: Season 1: Vol. 1: Disc 4
>------------------------------------- 
 Thundercats: Season 1: Vol. 1: Disc 5
 .....................................
 Thundercats: Season 1: Vol. 1: Disc 6

(Não consigo descobrir como capturar uma captura de tela enquanto arrasta.)

3
Patrick McElhaney

O fluxo de trabalho típico para descartar é:

repeat while mouse is down

    dragEnter -> mouse pointer has moved into some new area.
                 Highlight the area if the dragged data is valid for dropping into it,
                 adjust cursor (forbidden, copy, symlink, or move)
                 adjust the drag image (e.g. when dragging from icon view in file picker
                 to list view in another file picker, now's the time to animate the
                 drag image to look like the list view items would when dropped.

    dragLeave -> Undo any previous highlight.

end repeat

if we were over a valid drop location
    drop
else
    show an animation of the drag image snapping back to its
         point of Origin to make it clear the drag was canceled.
end if

Undo any previous highlight.

Os tipos típicos de destaque destacado são:

  • Contorne um contêiner (por exemplo, exibição de rolagem) para indicar que algo é um destino de descarte válido
  • Marcas de inserção para indicar quais itens da lista ou caracteres de texto o item será colocado entre ou depois
  • A variante selecionada de um ícone (ou uma variante "dobrada aberta" de, por exemplo, um ícone de pasta) para indicar que uma gota terminará dentro um item, não antes ou depois dele.

Observe que as marcas de inserção não são apenas úteis para listas em que você pode reorganizar livremente o pedido de itens, mas também para listas classificadas, por exemplo. uma queda entre ou em dois arquivos em uma lista classificada é perfeitamente válida, mas você deseja indicar que, após a classificação, o arquivo será exibido mais abaixo.

Por uma questão de integridade, o fluxo de trabalho típico para arrastar é:

detect whether a click-and-hold or click-and-move is really intended to be a drag:
 - Is it obvious? (e.g. dragging a file by its icon -- there is nothing else you can do
 - Or: Wait for a while, has the mouse moved by at least 4 pixels in some direction
       and has the mouse still not been released? (Accounts for most peoples' less-than-pefect motor skills
 - Or: Is the drag in a certain direction that doesn't make sense for anything else?
       (E.g. dragging sideways over text may be an attempt at a new selection,
       OTOH a vertical drag > 4px on a selection is pretty guaranteed to be a drag attempt.

Set up a drag image that is attached to the mouse. This image usually looks exactly
    like a 70% opaque version of the selection (giving the illusion you're moving
    the selection) and if you haven't moved the mouse yet, should invisibly overlay
    the actual selection. (I.e. move it relative to the mouse, don't center it
    under the mouse)

Start the drag! (following this we do the workflow for dropping)

(Pelo menos é assim que o arrastar e soltar geralmente acontece nos aplicativos modernos do Mac OS X, embora a atualização da imagem do arrasto durante um solte seja algo bastante novo)

2
uliwitness