MichellHenrique 1 Denunciar post Postado Junho 12, 2018 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
