Arrastar e soltar HTML - Implementar técnicas comprovadas

Aviso : tente ler a propriedade "tagName" em null em /home/mrexamples/public_html/wp-content/themes/awaken/functions.php na linha 1055

Aviso : tente ler a propriedade "nodeValue" em null em /home/mrexamples/ public_html/wp-content/themes/awaken/functions.php na linha 1059

API de arrastar e soltar HTML

Hoje, o tópico de nossa discussão é arrastar e soltar HTML . Neste artigo, você aprenderá como arrastar e soltar qualquer elemento HTML .

Exemplo

Coloque a imagem mrexamples dentro do retângulo arrastando-a.

Índice-

API de arrastar e soltar HTML:
Arrastar e soltar:
Eventos de arrastar:
Compatibilidade do navegador:
Exemplo de Arrastar e Soltar HTML:
Crie um elemento arrastável:
ondragstart e setData() – O que arrastar?:
Ondragover – Onde cair?:
Faça o Drop – ondrop:
HTML arrastando texto:
HTML arrastável:
Uso de arrastar e soltar HTML:

Arrastar e soltar:

Usar o mouse para arrastar e soltar itens é uma prática frequente com arrastar e soltar HTML . É “pegar” um objeto e reposicioná-lo em algum lugar.

Eventos de arrastar:

A capacidade de arrastar e soltar em HTML é baseada em modelos de eventos DOM , com eventos de arrastar originados de eventos de mouse. O processo de arrastar geralmente envolve selecionar um elemento arrastável, arrastá-lo para um elemento soltável e, em seguida, soltá-lo quando se trata de arrastar e soltar HTML .

Há uma variedade de eventos que ocorrem durante as operações de arrastar, incluindo dragover e eventos de arrastar, que podem acontecer várias vezes.

Existe um manipulador de eventos relacionado para cada tipo de evento de arrastar:

Evento	Executar durante
`dragstart`	Quando um usuário começa a arrastar um elemento ou objeto.
`drag`	Um item arrastado (seleção de imagem ou texto) é movido.
`dragleve`	O item que está sendo arrastado deixa um destino de soltura válido.
`dragend`	Quando você solta um botão do mouse ou pressiona Esc, uma operação de arrastar termina.
`dragover`	Aproximadamente a cada 0,1 segundos, um item é arrastado sobre um destino de soltar válido.
`drop`	Quando um objeto é solto em um destino de soltar válido.
`dragenter`	Itens arrastáveis inserem destinos de soltar válidos.

IMPORTANTE: Arrastar um documento do sistema operacional para o navegador não aciona os eventos dragstart ou dragend quando se trata de arrastar e soltar HTML.

Compatibilidade do navegador :

Os números da tabela denotam a primeira versão do navegador a incluir compatibilidade completa de arrastar e soltar no que diz respeito ao arrastar e soltar HTML .

API
Arrastar e soltar	4.0	9,0	3.5	6.0	12,0

Exemplo de Arrastar e Soltar HTML:

Um cenário básico de arrastar e soltar é mostrado abaixo:

Example

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
<!DOCTYPE HTML>
<html>
<head>
<style>
#firstDiv{
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
margin: 10px 0;
}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="firstDiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag-image-1" src="https://mrexamples.com/wp-content/uploads/html_images/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Dica: É aconselhável dividir os eventos de arrastar e soltar em seus elementos componentes porque é mais fácil.

Crie um elemento arrastável:

Para começar, em HTML draganddrop , o atributo draggable deve ser válido para que um elemento seja arrastado e solto.

ondragstart e setData() – O que arrastar?

Em seguida, declare o comportamento esperado do elemento arrastado.

O atributo ondragstart no exemplo de código acima chama um método drag(event), passando o evento e os dados a serem arrastados.

Você pode alterar o tipo e o valor dos dados arrastados com o método dataTransfer.setData() como se trata de arrastar e soltar HTML .
função arrastar(ev) { ev.dataTransfer.setData(“texto”, ev.target.id); }
Em HTML draganddrop , o id do elemento arrastado (“drag1”) é o valor e o tipo de dados é “texto”.

Ondragover – Onde cair?

Os dados podem ser descartados em um local predeterminado acionando o evento ondragover.

É impossível soltar dados ou elementos em outros elementos por padrão. Para permitir uma queda, devemos desabilitar o processamento padrão do elemento.

Para fazer isso, usamos o método event.preventDefault() do evento ondragover em HTML draganddrop :

event.preventDefault()

Do the Drop – ondrop

Um evento drop ocorre quando os dados que estavam sendo arrastados são liberados.

O método drop(event) é invocado no exemplo anterior por meio do atributo ondrop quando se trata de arrastar e soltar HTML :

function drop(ev) {ev.preventDefault();
var data = ev.dataTransfer.getData(“text”);
ev.target.appendChild(document.getElementById(data));
}

Explicação detalhada do código:

Para impedir que o navegador processe os dados da maneira padrão, você pode usar a função preventDefault() (o padrão é abrir como o link no drop).
O método dataTransfer.getData() pode recuperar as informações arrastadas. Qualquer informação do mesmo tipo que for enviada para setData() será retornada.
O id do elemento é o que foi arrastado. Assim é o que você encontrará nos dados (“drag1”).
Combinando o elemento que você arrastou com o que você soltou.

Example:

1
2
3
4
<!DOCTYPE HTML>
<html><body><br><br><br><style><br>#firstDiv, #secondDiv {<br>float: left;<br>width: 100px;<br>height: 35px;<br>margin: 10px;<br>padding: 10px;<br>border: 1px solid black;<br>}<br></style><br><script><br>function allowDrop(ev) {<br>ev.preventDefault();<br>}function drag(ev) {<br>ev.dataTransfer.setData("text", ev.target.id);<br>}function drop(ev) {<br>ev.preventDefault();<br>var data = ev.dataTransfer.getData("text");<br>ev.target.appendChild(document.getElementById(data));<br>}<br></script><br><br><h2>Drag and Drop</h2><br><p>Drag the image back and forth between the two div elements.</p><div id="firstDiv" ondrop="drop(event)" ondragover="allowDrop(event)"><br><img src="https://mrexamples.com/wp-content/uploads/html_images/img_logo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="85" height="28"><br></div><div id="secondDiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

HTML Arrastando Texto

Neste exemplo de arrastar e soltar, demonstramos como arrastar o texto em uma caixa retangular:

Example:

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
<!DOCTYPE HTML>
<html>
<head>
 <title>Text Dragging</title>
 <style>
 .dropbox {
  width: 200px;
  height: 60px;
  padding: 20px;
  border: 2px solid #6f0722;
 }
 </style>
 <script>
 function droppoint(event) {
  var data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  event.preventDefault();
 }
 function allowDropOption(event) {
  event.preventDefault();
 }
 function dragpoint(event) {
  event.dataTransfer.setData("Text", event.target.id);
 }
 </script>
</head>
<body>
  <h3>Drag the text in the rectangle</h3>
  <div class="dropbox" ondrop="droppoint(event)" ondragover="allowDropOption(event)">
   </div>
  <p id="dragging" draggable="true" ondragstart="dragpoint(event)">
    MR EXAMPLES: All you need to know.
   </p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

HTML arrastável

O exemplo abaixo ilustra o uso da propriedade arrastável, há três caixas no exemplo e todas elas são arrastáveis:

Example:

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function dragStart(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dragDrop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
#boxes {
margin: auto;
width: 60%;
height: 250px;
border: 2px solid rgb(50, 7, 7);
padding: 8px;
}
#b1,
#b2,
#b3 {
float: left;
margin: 5px;
padding: 6px;
}
#b1 {
width: 80px;
height: 80px;
background-color: #99eedd;
}
#b2 {
width: 120px;
height: 120px;
background-color: #f9c639;
}
#b3 {
width: 200px;
height: 200px;
background-color: #45db1c;
}
p {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.mr {
font-size: 40px;
color: #480f0f;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div class="mr">MR EXAMPLES</div>
<p>Boxes can be dragged and dropped</p>
<div id="boxes">
<div id="b1" draggable="true" ondragstart="dragStart(event)">
</div>
<div id="b2" draggable="true" ondragstart="dragStart(event)">
</div>
<div id="b3" ondrop="dragDrop(event)" ondragover="allowDrop(event)">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Uso de arrastar e soltar HTML

Arrastar e soltar HTML é um recurso que permite aos usuários arrastar um objeto e soltá-lo em um local diferente em uma página da web. Este recurso tem várias aplicações úteis:

Upload de arquivo: Arrastar e soltar pode ser usado para fazer upload de arquivos para um site. Os usuários podem simplesmente arrastar um arquivo de seu computador e soltá-lo no site, sem precisar navegar pelas pastas ou clicar em um botão para selecionar um arquivo.
Classificar e reordenar: Arrastar e soltar pode ser usado para classificar e reordenar elementos em uma página da web. Por exemplo, os usuários podem arrastar e soltar itens em um carrinho de compras para alterar sua ordem ou arrastar e soltar itens em uma lista de tarefas para priorizá-los.
Jogos interativos: arrastar e soltar pode ser usado para criar jogos interativos e quebra-cabeças em uma página da web. Os usuários podem arrastar e soltar objetos para resolver quebra-cabeças, construir estruturas ou completar desafios.
Automação do fluxo de trabalho: arrastar e soltar pode ser usado para automatizar fluxos de trabalho e simplificar tarefas complexas. Os usuários podem arrastar e soltar arquivos, pastas ou outros elementos para acionar processos automatizados, como conversões de arquivos ou análise de dados.

Se este artigo de alguma forma o ajudou a satisfazer seus desejos educacionais, compartilhe esta informação significativa com seus amigos clicando nos links abaixo.

Nós valorizamos o seu feedback.

API de arrastar e soltar HTML

Exemplo

Arrastar e soltar:

Eventos de arrastar:

Compatibilidade do navegador :

Exemplo de Arrastar e Soltar HTML:

Example

Crie um elemento arrastável:

ondragstart e setData() – O que arrastar?

Ondragover – Onde cair?

Do the Drop – ondrop

Example:

HTML Arrastando Texto

Example:

HTML arrastável

Example:

Uso de arrastar e soltar HTML

Sentindo entediado?