Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, gostaria de usar essa função, queria arrastar imagem e ao soltar aparecer o conteúdo em html
Seria mais ou menos parecido com esse exemplo https://www.w3schools.com/Html/tryit.asp?filename=tryhtml5_draganddrop2
Exemplo: eu arrasto uma imagem de um header e ao soltar do lado direito aparece o html dele já pronto igual da imagem que arrastei.
Alguém pode ajudar ?
Oi, pq não ta 100% do jeito que eu quero, gostaria que arrastasse imagem e ao soltar se transformasse no conteudo html, entende?
entendi, então você quer exibir as marcações do html, certo? se for isso mesmo eu te pergunto alem do elemento <img>, qual outro elemento ou quantos elementos parents você exibiria, porque pense que o elemento <img> pode estar dentro de qualquer estrutura então é necessario ter uma padrão de nivel de estrutura que deseja capturar
que acredito que seria +/- isso
ex: [https://jsbin.com/cowihizuxi/edit?html,output](https://jsbin.com/cowihizuxi/edit?html,output)>
19 horas atrás, wanderval disse:
entendi, então você quer exibir as marcações do html, certo? se for isso mesmo eu te pergunto alem do elemento <img>, qual outro elemento ou quantos elementos parents você exibiria, porque pense que o elemento <img> pode estar dentro de qualquer estrutura então é necessario ter uma padrão de nivel de estrutura que deseja capturar
que acredito que seria +/- isso
ex: [https://jsbin.com/cowihizuxi/edit?html,output](https://jsbin.com/cowihizuxi/edit?html,output)
Oi, é quase isso, quando você arrasta e solta essa imagens nesse exemplo que você mandou ela vai pro outro lado no proprio codigo da imagem, certo?
Exemplo: imagem é <img src="bola.jpg"> e você arrasta e lá aparece escrito esse código.
no meu codigo tem várias <li> com imagem assim:
<li class="element headers ui-draggable ui-draggable-handle" style="display: list-item;">
<img src="images/themes/builder/content_section1.png" data-srcc="templates/block/content_section1/index.html" data-height="498">
</li>
<li class="element headers ui-draggable ui-draggable-handle" style="display: list-item;">
<img src="images/themes/builder/content_section2.png" data-srcc="templates/block/content_section2/index.html" data-height="498">
</li>
repare que eu coloco uma imagem e ao soltar eu quero levar o código html que está incluido dentro do link da imagem, viu?
mas se você mesmo colocou o exemplo de código porque não usou esse código pra resolver o seu problema ?