Ajuda Drag on Drop - Html5 + JavaScript + Ajax
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!Discussão (0)
Carregando comentários...