Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

diegovieira

Drag and drop

Por , em Javascript

Recommended Posts

diegovieira    0

diegovieira
Postado

Olá, alguém sabe como eu faço pra imagem poder ser arrastada somente pra uma dessas duas divs?? Valeu!

<!DOCTYPE html>
<head>
	<title>Drag and Drop</title>
	<meta charset=utf-8>
</head>
<style>
	#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
	#div2 {width:350px;height:90px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
	function drag(ev)
	{
		ev.dataTransfer.setData("Text", ev.target.id);
	}

	function allowDrop(ev) 
	{
		ev.preventDefault();
	}

	function drop(ev)
	{
		ev.preventDefault();
		var data = ev.dataTransfer.getData("Text");
		ev.target.appendChild(document.getElementById(data));
	}
</script>
<body>
	<p>Arraste a imagem para dentro do retangulo:</p>

	<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></br>
	<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></br>
	<img id="drag1" src="imagem.jpg" draggable="true" ondragstart="drag(event)" width="336" height="70">
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito