Drag-n-drop, Correção Ortográfica e barra de rolagem no HTML 5

Publicado: 1 de novembro de 2012 por Prof @Virtualiza Cooperativa em HTML 5
0

Drag and Drop

A API de Drag and Drop é relativamente simples. Basicamente, inserir o atributo

draggable=”true” num elemento o torna arrastável. E há uma série de eventos que você pode

tratar. Os eventos do objeto sendo arrastado são:

dragstart O objeto começou a   ser arrastado. O evento que a função recebe tem um atributo target, que contém   o objeto sendo arrastado.
drag O objeto está sendo   arrastado.
dragend A ação de arrastar   terminou.

 

O objeto sobre o qual outro é arrastado sofre os seguintes eventos:

dragenter O objeto sendo   arrastado entrou no objeto target.
dragleave O objeto sendo   arrastado deixou o objeto target.
dragover O objeto sendo   arrastado se move sobre o objeto target.
drop O objeto sendo   arrastado foi solto sobre o objeto target.

 

Detalhes importantes:

A ação padrão do evento dragover é cancelar a ação de dragging atual. Assim, nos objetos que devem receber drop, é preciso setar uma ação de dragover com, no mínimo, return false.

Seleções de texto são automaticamente arrastáveis, não precisam do atributo draggable. E se você quiser criar uma área para onde seleções de texto possam ser arrastadas, basta tratar esses mesmos eventos.

Por fim, todas funções de tratamento de evento de drag recebem um objeto de evento que contém uma propriedade dataTransfer, um dataset comum a todos os eventos durante essa operação de drag.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE HTML>
<html>
<head>
<metacontent=”text/html;charset=UTF-8” http-equiv=”content-type”/>
<title>HTML5 Drag and drop demonstration</title>
<style type=”text/css”>
#boxA, #boxB {
float:left;width:100px;height:200px;padding:10px;margin:10px;
font-size:70%;
}
#boxA {background-color:blue; }
#boxB {background-color:green; }
#drag, #drag2 {
width:50px;padding:5px;margin:5px;border:3pxblack solid;
line-height:50px;
}
#drag {background-color:red;}
#drag2 {background-color:orange;}
</style>
<script type=”text/javascript”>
// Quando o usuário inicia um drag, guardamos no dataset do evento
// o id do objeto sendo arrastado
function dragStart(ev) {
ev.dataTransfer.setData(“ID”,ev.target.getAttribute(‘id’));
}
// Quando o usuário arrasta sobre um dos painéis, retornamos
// false para que o evento não se propague para o navegador, o
// que faria com que o conteúdo fosse selecionado.
functiondragOver(ev) {return false; }
// Quando soltamos o elemento sobre um painel, movemos o
// elemento, lendo seu id do dataset do evento
functiondragDrop(ev) {
varidelt =ev.dataTransfer.getData(“ID”);
ev.target.appendChild(document.getElementById(idelt));
}
</script>
</head>
<body>
<!-- Painel 1 -->
<divid=”boxA” ondrop=”return dragDrop(event)” ondragover=”return dragOver(event)”>
<!-- Draggable 1 -->
<divid=”drag” draggable=”true” ondragstart=”return dragStart(event)”>drag me</div>
<!-- Draggable 2 -->
<divid=”drag2” draggable=”true” ondragstart=”return dragStart(event)”>drag me</div>
</div>
<!-- Painel 2 -->
<divid=”boxB”
ondrop=”return dragDrop(event)” ondragover=”return dragOver(event)”>
</div>
</body>
</html>

 

 

Revisão ortográfica e gramatical

Os agentes de usuário podem oferecer recursos de revisão ortográfica e gramatical, dependendo do que houver disponível em cada plataforma. Os desenvolvedores podem controlar o comportamento dessa ferramenta através do atributo spellcheck. Inserir spellcheck=”true”num elemento faz com que a revisão esteja habilitada para ele. Você também pode desabilitar a revisão para determinado elemento, inserindo spellcheck=”false”.

SCROLL para ver E OCULTA

Rolagem em vista

UM Simples Truque, mas Muito util. Guia Você PODE Fazer:

document.getElementById (‘aviso’). scrollIntoView ()

Vai Rolar um ISSO ATÉ page Que o Elemento com o id “aviso” esteja visível não topo fazer viewport. Guia Você PODE passar hum topo parametro opcional:

document.getElementById (‘aviso’). scrollIntoView (false)

O valor padrão è verdade. Se passar Você. falsa, uma rolagem Vai deixar o Objeto visível NA Base do viewport.

escondido

Ocultar Elementos de e exibir E UMA das tarefas Mais comuns los JavaScript. Em HTML5 existe hum Atributo Específico parágrafo ISSO, o Atributo escondido. Ao inserí-lo los hum Elemento Assim:

<div hidden> Xi, se esconde! </ div>

Ou Assim:

<div hidden=”true”> Xi, se esconde! </ div>

 

Este treinamento faz parte do Microsoft Virtual Academy:http://www.microsoftvirtualacademy.com

Deixe um comentário