Ir para conteúdo

POWERED BY:

Arquivado

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

MichellHenrique

Ajuda Drag on Drop - Html5 + JavaScript + Ajax

Por , em Javascript

Recommended Posts

MichellHenrique    1

MichellHenrique
Postado

Olá Pessoal, estou tentando dar uma modernizada em uma página web que pretendo disponibilizar futuramente.

 

A questão é, os itens da página inicial deverão ser customizáveis pelo usuário, assim ele poderá organizar tudo de

acordo com sua preferência e necessidade. Achei um exemplo na internet e consegui adapta-lo para trocar as

imagens para divs vazias, porém, não estou conseguindo trocar uma imagem no lugar da outra. Além desse

problema também necessito de uma forma de armazenar as alterações feitas pelo usuario tipo, div1 = imagem3,

div2 = vazia, div3 = imagem1... Vi que geralmente usa-se Ajax, mas tenho muito pouco conhecimento nessa área.

 

Código: 

<!DOCTYPE HTML>
<html>
<head>
<style>
	#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8 {
	    float: left;
	    width: 100px;
	    height: 35px;
	    margin: 10px;
	    padding: 10px;
	    border: 1px solid black;
	}

	#center {
	    width: 570px;
	    height: 80px;
		/*border: 2px dashed #000;*/
	}

</style>
<script type="text/javascript">
	function allowDrop(ev) {
	    ev.preventDefault();
	}

	function drag(ev) {
	    ev.dataTransfer.setData("text", ev.target.id);
	    //this.style.opacity = '0.4';
		//old = this.innerHTML;
	}

	function drop(ev) {
	    ev.preventDefault();
	    var novo   = ev.dataTransfer.getData("text");
	    ev.target.appendChild(document.getElementById(novo));
	}
</script>
</head>
<body>
<center>

<h2>Drag and Drop</h2>

<div id="center">
  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="https://rlv.zcache.com.br/adesivo_retangular_promocional_seu_empresa_ou_logotipo_verde_do-r4dc7b9b056db45fbb6893ac772298af1_v9wxo_8byvr_307.jpg" draggable="true" ondragstart="drag(event)" id="img1" width="88" height="31">
  </div>

  <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img src="http://designportugal.net//wp-content/uploads/2014/06/logotipo_da_nike.jpg" draggable="true" ondragstart="drag(event)" id="img2" width="88" height="31">
  </div>

  <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

  <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>

<div id="center">
  <div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

  <div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

  <div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

  <div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>

</center>
</body>
</html>

 

Desde já agradeço a ajuda, obrigado!

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