HTML5 - Drag-n-drop e Correção Ortográfica

Posted: May 07, 2012 at 11:41 AM

By: DiegoBlanco

(2)

6,414 Views

22 Comments

DRAG-N-DROP E CORREÇÃO ORTOGRÁFICA

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.

<!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".

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

Follow the Discussion

Oops, something didn't work.

Try again?

Getting "follow" information

Stop following these comments

Start following these comments

Removing your "follow"

Setting up your "follow"

Subscribe to this comments

O problema em geral na digitação do conteúdo, tag, atributos, etc. Muitos estão emendados, por isso não funciona ou aparece erro.
Abaixo o script funcionando legal:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title></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; cursor:pointer;}
#drag2 {background-color:orange; cursor:pointer;}
</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.
function dragOver(ev) {return false; }

// Quando soltamos o elemento sobre um painel, movemos o
// elemento, lendo seu id do dataset do evento
function dragDrop(ev) {
var idelt = ev.dataTransfer.getData("ID");
ev.target.appendChild(document.getElementById(idelt));
}

</script>
</head>
<body>


<div id="boxA" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">

<div id="drag" draggable="true" ondragstart="return dragStart(event)">drag me</div>

<div id="drag2" draggable="true" ondragstart="return dragStart(event)">drag me</div>
</div>


<div id="boxB" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>

</body>
</html>

Follow
Oops, something didn't work.

Try again?

Sign In to be begin to follow these comments

What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in. You need to be signed in to Channel 9 to use this feature.

Getting "follow" information

Stop following these comments

Start following these comments

What does this mean?
Following an item on Channel 9 allows you to watch for new content and comments that you are interested in and view them all on your notifications page.

Removing your "follow"

Setting up your "follow"

Did you know you can
sign up for email notifications?
- Subscribe to this comments

Elton777

Jul 04, 2012 at 8:42 PM

SHOW !
Pablo

Jul 14, 2012 at 9:51 AM

Terrível, é necessário conhecimento de javascript para esse assunto e para o anterior também. Eu fiz o curso de javascript mas faltou dá uma polida. CSS é muito fácil mas javascript é muito mais difícil.

Tudo bem, com um pouco de dedicação é possível até trabalhar no facebook, mas enquanto isso, aqueles que não fizeram o curso de javascript, ficaram na curiosidade. Aconselho o curso XTI que tem disponível no youtube, muito fácil encontrar. =D
RLSa

Jul 30, 2012 at 11:34 AM

É esperado que exista conhecimento de javascript para a programação de eventos. Não existe nada de terrível nisto. É importante demonstrar que existe a possibilidade a ser explorada e nisto o artigo foi bem sucedido.
Roberto

Jul 30, 2012 at 12:57 PM

Explicação mais ou menos.
Orlando

Jul 30, 2012 at 8:17 PM

Show!!

os javascripts usados aqui são muito simples. e autointendíveis se souber um mínimo de inglês.
Orlando

Jul 30, 2012 at 8:18 PM

pecou nos erros de sintaxe no código
Danilo Santos

Aug 03, 2012 at 12:56 PM

Lembrem-se, um Front-End deve por obrigação saber Javascript.
Ademilson

Aug 16, 2012 at 10:45 AM

Erro linha 25 =/

e eu nao entendi muito, pouco conhecimento em javascript
Cesar

Aug 29, 2012 at 8:17 AM

O elemento input do HTML5, recebe no atributo type, os valores:

o teste indica este artigo para a resposta correta, exatamente onde fala sobre isso?
terra

Sep 04, 2012 at 1:03 PM

Hoje é comum em qualquer lugar no mundo a combinação JavaScript, CSS e Html, é obrigatório conhecimentos no mínimo básico para desenvolver algo além de uma página estática com algumas imagens e textos coloridos.

O Html 5 está muito bom, posso citar mais uma combinação interessante para web (mesmo em alta escalabilidade), usando:
-EntityFramework+Razor+Html5 (e pitadas de JavaScript/CSS nos detalhes não preenchidos pela combinação.

Javascript é uma linguagem fácil, basta praticar, busque tutoriais e literaturas sobre o assunto.
Desde os primórdios da internet JavaScript é usado como um canevete suiço para web, veja o tanto de frameworks, bibliotecas e tecnologias famosas e robustas que utilizam JavaScript para cumprirem suas tarefas.
Leandro

Sep 04, 2012 at 8:27 PM

Pra bom entendedor meia palavra basta.
kelli

Oct 17, 2012 at 10:33 AM

Nossa eu li >.< chegou uma hora que meu cérebro começou a dar nó! É muito legal... mas to começando a ficar perdida kkkk
OgroBass

Oct 22, 2012 at 8:08 PM

O problema em geral na digitação do conteúdo, tag, atributos, etc. Muitos estão emendados, por isso não funciona ou aparece erro.
Abaixo o script funcionando legal:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title></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; cursor:pointer;}
#drag2 {background-color:orange; cursor:pointer;}
</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.
function dragOver(ev) {return false; }

// Quando soltamos o elemento sobre um painel, movemos o
// elemento, lendo seu id do dataset do evento
function dragDrop(ev) {
var idelt = ev.dataTransfer.getData("ID");
ev.target.appendChild(document.getElementById(idelt));
}

</script>
</head>
<body>


<div id="boxA" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">

<div id="drag" draggable="true" ondragstart="return dragStart(event)">drag me</div>

<div id="drag2" draggable="true" ondragstart="return dragStart(event)">drag me</div>
</div>


<div id="boxB" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>

</body>
</html>
alexandrealrocha Alexandre Rocha

Oct 23, 2012 at 1:17 PM

@OgroBass: Funcionou redondo!
webrenata

Nov 17, 2012 at 3:24 PM

mas uma vez não funciona no IE, no firefox funciona perfeitamente
resident java

Nov 18, 2012 at 11:15 AM

Conteúdo sobre HTML 5 está ótimo e fácil.
Jonatas

Nov 21, 2012 at 9:32 AM

O curso está bastante interessante, mas desde o SVG tem apresentado problemas no código-fonte. Um curso desta magnitude não poderia ter erros assim tão banais...
Claudinei de Camargo

Nov 28, 2012 at 9:26 AM

Os erros no codigo html se deve a alguns erros de digitação, notei que quase todas funções em Javascript o "function esta colado com o nome da função"
Julian

Nov 29, 2012 at 5:24 AM

As ultimas aulas estão ficando cada vez mais mal explicadas e os códigos não funcionam, tem que ficar sempre consertando.
Lah

Jan 02, 2013 at 3:05 PM

Obrigada OgroBass! Ameei!
Wilson Ney

Mar 27, 2013 at 3:41 AM

O desenvolvedor conhecendo o Java Script fica mais fácil programar, programar sem conhecer Java não tem como cobrar perfeição dos códigos fica bem mais difício, o que acontece e errar mesmo, sendo que o inglês é essencial, mas, sabendo o básico e as palavras que se usa no Java Script em inglês já é uma grande vitória, sendo que é uma obrigação usar o inglês na hora de programar em Java Script, programar em HTML5, expandir páginas e acrecentar cores com CSS dentre muitas funcões. Obrigado!
Jader de Carvalho

Apr 15, 2013 at 11:53 AM

Realmente, cada vez mais os erros (de digitação normalmente) vão aumentando. Mas vamos levar pelo lado bom, é uma chance que temos de corrigir o erro e nos aperfeiçoarmos, dá mais trabalho, porém de certa forma é melhor que ler, copiar, colar e ver que funcionou e pronto.

Parabéns pelo post, mesmo com os pormenores está muito bem explicado!