Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

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

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

Tags:

Follow the Discussion

  • SHOW !

  • PabloPablo

    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

  • É 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.

  • RobertoRoberto

    Explicação mais ou menos.

  • OrlandoOrlando

    Show!!

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

  • OrlandoOrlando

    pecou nos erros de sintaxe no código

  • Danilo SantosDanilo Santos

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

  • Erro linha 25 =/

     

    e eu nao entendi muito, pouco conhecimento em javascript

  • CesarCesar

    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?

  • 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.

  • LeandroLeandro

    Pra bom entendedor meia palavra basta.

  • kellikelli

    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

  • OgroBassOgroBass

    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>


    <!-- Painel 1 -->
    <div id="boxA" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
    <!-- Draggable 1 -->
    <div id="drag" draggable="true" ondragstart="return dragStart(event)">drag me</div>
    <!-- Draggable 2 -->
    <div id="drag2" draggable="true" ondragstart="return dragStart(event)">drag me</div>
    </div>

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

    </body>
    </html>

  • Alexandre Rochaalexandreal​rocha Alexandre Rocha

    @OgroBass: Funcionou redondo!

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

  • resident javaresident java

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

  • JonatasJonatas

    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 CamargoClaudinei de Camargo

    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"

  • JulianJulian

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

  • LahLah

    Obrigada OgroBass! Ameei!

  • Wilson NeyWilson Ney

    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 CarvalhoJader de Carvalho

    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!

  • pedropedro

    gostei

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.