Como criar elementos de arrastar e soltar com JavaScript de baunilha e html

HTML e JavaScript podem ser combinados para criar animações e efeitos incríveis e atraentes. Existem milhões de sites disponíveis na internet e você não deseja que seu site seja esquecido no meio desses sites. Um dos efeitos mais simples que você pode dar a um elemento em uma página da web é o efeito de arrastar e soltar. Para mover e colocar um item para qualquer ponto na página da web. Nesta postagem, vamos mostrar como fazer um elemento arrastável e droppable na página da web.

Elemento arrastável e droppable com html e javascript

Crie um novo elemento HTML e dentro da etiqueta corporal do arquivo HTML, crie um novo elemento div com as seguintes linhas de código:

Arraste e me solte

Isso criará a seguinte página da web:

Para estilizar um pouco esse elemento, escreva o seguinte código fora do marcação:

Ao alterar esse estilo, você obtém a seguinte saída na página da web:

Para o código do script, crie um novo tag de script , O JavaScript seremos colocados dentro desta etiqueta de script. Para a parte JavaScript, vamos primeiro criar um novo var Isso mais tarde usará a referência do elemento para alterar sua posição na página da web:

var dragValue;

Em seguida, vamos criar uma função chamada mover() que usaremos para mover o elemento. A primeira coisa que faremos dentro desta função de movimento é obter a referência de nosso elemento dentro de uma variável com a seguinte linha de código:

var elemento = documento.getElementById ("dragElement");

Não que tenhamos nossa referência, vamos definir a posição desse elemento como absoluto. À medida que estamos movendo o elemento com a nossa escolha, queremos colocá -lo exatamente onde queremos, não em relação a algum outro elemento:

elemento.estilo.posicionamento = "absoluto";

Quando clicamos neste elemento, queremos passar a referência de nosso elemento ao “DragValue” variável para que possamos manipular sua posição:

elemento.onMousedown = function ()
dragValue = elemento;
;

Agora, que temos a referência de nosso elemento armazenado no DragValue Variável, agora vamos colocá -lo na localização do mouse usando as seguintes linhas de código:

documento.onmouseMove = function (e)
var x = e.PageX;
var y = e.Pagey;
DragValue.estilo.esquerda = x + "px";
DragValue.estilo.top = y + "px";
;

Quando liberamos o botão do mouse, queremos remover a referência de nosso elemento do “DragValue" variável:

elemento.onMouseUp = function ()
dragValue = nulo;
;

O último passo é invocar isso mover() função com a seguinte linha de código:

mover();

O código de script completo será:

Salve o arquivo e execute o HTML, e você obterá o seguinte resultado no seu navegador:

E aí está; Você fez um elemento de arrastar e soltar no JavaScript de baunilha

Conclusão

Um dos efeitos mais simples que você pode criar usando o Javascript de baunilha junto com o HTML é o elemento arrastável e droppable em sua página da web. Entre o meio de milhões de sites, você deseja que sua página da web se destaque. Para isso, a página da web precisa ser super atraente e interativa. Existem várias maneiras de fazer um efeito ou animação em particular graças às quantidades cada vez maiores de bibliotecas JavaScript. Mas hoje nos concentramos em criar algo interativo usando Javascript de baunilha.