Drag and Drop para arrastar imagem

Não consegui entender.

É um webapp? você quer arrastar imagens do seu desktop pra dentro do browser?

Ou as imagens estão no mesmo browser, só que em abas diferente?

Ou todas as imagens forram upadas e você quer mover de um ponto para outro na mesma view?

Essas imagens são de formas geométricas? São blocos tipo tetris?

Seria imagem de bloco html dentro de um dashboard e arrastar pro lado

Consegui algo parecido pesquisando mas ta o conteudo dentro do mesmo codigo e queria que ele tivesse fora e sendo incluindo como conteudo-1.html , conteudo-2.html

Ta ai o codigo pra você entender melhor https://pastebin.com/efaTtWMK

Nao deve ter isso

-

"if (type === "menu") {

-

content = "<nav class='navbar navbar-expand-lg navbar-light bg-light'>" +

-

"<a class='navbar-brand' href='#'>Navbar</a>" +

-

"<button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarSupportedContent' aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation'>" +

-

                   "<span class='navbar-toggler-icon'></span>" +...."

	deve ser algo assim mais ou menos if (type === "menu") { incluir "conteudo-1.html

	 

	entendeu o que preciso?

criando um método que implement o fetch e alterando pra async/await você consegue o que quer, mas manipulando arquivo você só conseguira executar o html dentro de um servidor não vai conseguir abrindo o html direto no browser.

	 

async function loadHtmlFile(pathFile) {
 try {
 const response = await fetch(pathFile);
 const html = await response.text();
 return html;
 } catch (error) {
 console.error('Error on load file:', error);
 return null;
 }
}

	ai você chamaria dessa forma e adicionando o async para que consiga lidar com a promise com await, nesse exemplo criei uma pasta "template" on de vai conter todos os arquivos html abstraidos desse metodo:

async function drop(event) {
 event.preventDefault();
 var type = event.dataTransfer.getData("text");
 var content = "";

 if (type === "menu") {
 content = await loadHtmlFile('./template/menu.html');
 } else if (type === "header") {
 content = await loadHtmlFile('./template/header.html');
 } else if (type === "content") {
 content = await loadHtmlFile('./template/content.html');
 } else if (type === "footer") {
 content = await loadHtmlFile('./template/footer.html');
 }

	Uma sugestão de melhoria de codigo, em casos masi simples:

async function drop(event) {
 event.preventDefault();
 var type = event.dataTransfer.getData("text");
 var content = "";

 /*if (type === "menu") {
 content = await loadHtmlFile('./template/menu.html');
 } else if (type === "header") {
 content = await loadHtmlFile('./template/header.html');
 } else if (type === "content") {
 content = await loadHtmlFile('./template/content.html');
 } else if (type === "footer") {
 content = await loadHtmlFile('./template/footer.html');
 }*/

 template = {
 "menu": './template/menu.html',
 "header": './template/header.html',
 "content": './template/content.html',
 "footer": './template/footer.html'
 }

 content = await loadHtmlFile(template[type]);

>

14 horas atrás, wanderval disse:

 criando um método que implement o fetch e alterando pra async/await você consegue o que quer, mas manipulando arquivo você só conseguira executar o html dentro de um servidor não vai conseguir abrindo o html direto no browser.

  

async function loadHtmlFile(pathFile) {
 try {
 const response = await fetch(pathFile);
 const html = await response.text();
 return html;
 } catch (error) {
 console.error('Error on load file:', error);
 return null;
 }
}

 ai você chamaria dessa forma e adicionando o async para que consiga lidar com a promise com await, nesse exemplo criei uma pasta "template" on de vai conter todos os arquivos html abstraidos desse metodo:

async function drop(event) {
 event.preventDefault();
 var type = event.dataTransfer.getData("text");
 var content = "";

 if (type === "menu") {
 content = await loadHtmlFile('./template/menu.html');
 } else if (type === "header") {
 content = await loadHtmlFile('./template/header.html');
 } else if (type === "content") {
 content = await loadHtmlFile('./template/content.html');
 } else if (type === "footer") {
 content = await loadHtmlFile('./template/footer.html');
 }

 Uma sugestão de melhoria de codigo, em casos masi simples:

async function drop(event) {
 event.preventDefault();
 var type = event.dataTransfer.getData("text");
 var content = "";

 /*if (type === "menu") {
 content = await loadHtmlFile('./template/menu.html');
 } else if (type === "header") {
 content = await loadHtmlFile('./template/header.html');
 } else if (type === "content") {
 content = await loadHtmlFile('./template/content.html');
 } else if (type === "footer") {
 content = await loadHtmlFile('./template/footer.html');
 }*/

 template = {
 "menu": './template/menu.html',
 "header": './template/header.html',
 "content": './template/content.html',
 "footer": './template/footer.html'
 }

 content = await loadHtmlFile(template[type]);

  

	 

	Fiz isso e não apareceu nada quando soltei, vou postar o link do codigo  [https://pastebin.com/hbkJn1jg](https://pastebin.com/hbkJn1jg)

	deveria funcionar no xampp né?

mas pelo que vi do seu código está faltando o metodo que citei:

async function loadHtmlFile(pathFile) {
 try {
 const response = await fetch(pathFile);
 const html = await response.text();
 return html;
 } catch (error) {
 console.error('Error on load file:', error);
 return null;
 }
}

>

9 horas atrás, wanderval disse:

mas pelo que vi do seu código está faltando o metodo que citei:

async function loadHtmlFile(pathFile) {
 try {
 const response = await fetch(pathFile);
 const html = await response.text();
 return html;
 } catch (error) {
 console.error('Error on load file:', error);
 return null;
 }
}

  

	 

	 

	Coloquei e nada funcionou, ve meu codigo: [https://pastebin.com/LRFdb6HS](https://pastebin.com/LRFdb6HS)

	 

	..

eu postei inicialmente os metodo que deveria ser adicionado e o que deveria ser modificado mas o restante dos metodos permanecem, vi que você removeu alguns metodos.

1-so fiz alterações não substitui todo o script

2-tem que rodar o projeto em um servidor local senão terá problema de cors

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

function drag(event, type) {
 event.dataTransfer.setData("text", type);
}

async function loadHtmlFile(pathFile) {
 try {
 const response = await fetch(pathFile);
 const html = await response.text();
 return html;
 } catch (error) {
 console.error('Error on load file:', error);
 return null;
 }
}

async function drop(event) {
 event.preventDefault();
 var type = event.dataTransfer.getData("text");
 var content = "";

 template = {
 "menu": './template/menu.html',
 "header": './template/header.html',
 "content": './template/content.html',
 "footer": './template/footer.html'
 }

 content = await loadHtmlFile(template[type]);

 var dropzone = event.target.closest('.content');
 if (dropzone) {
 var block = document.createElement("div");
 block.className = "alert alert-primary position-relative";
 block.innerHTML = content;

 var deleteButton = document.createElement("i");
 deleteButton.className = "fa fa-trash delete-button";
 deleteButton.onclick = function() {
 if (confirm("Tem certeza que deseja deletar este bloco?")) {
 block.remove();
 }
 };

 var redButton = document.createElement("button");
 redButton.className = "red-button";
 redButton.innerHTML = "Deletar";
 redButton.onclick = function() {
 if (confirm("Tem certeza que deseja deletar este bloco?")) {
 block.remove();
 }
 };

 var duplicateButton = document.createElement("button");
 duplicateButton.className = "duplicate-button";
 duplicateButton.innerHTML = "Duplicar";
 duplicateButton.onclick = function() {
 duplicateBlock(block);
 };

 block.appendChild(deleteButton);
 block.appendChild(redButton);
 block.appendChild(duplicateButton);

 dropzone.appendChild(block);

 tinymce.init({
 selector: '.editable',
 height: 200,
 menubar: false,
 plugins: [
 'advlist autolink lists link image charmap print preview anchor',
 'searchreplace visualblocks code fullscreen',
 'insertdatetime media table paste code help wordcount'
 ],
 toolbar: 'undo redo | formatselect | bold italic backcolor | \
 alignleft aligncenter alignright alignjustify | \
 bullist numlist outdent indent | removeformat | help'
 });
 }
}

function duplicateBlock(originalBlock) {
 var newBlock = originalBlock.cloneNode(true);
 var deleteButton = newBlock.querySelector('.delete-button');
 deleteButton.onclick = function() {
 if (confirm("Tem certeza que deseja deletar este bloco?")) {
 newBlock.remove();
 }
 };
 var redButton = newBlock.querySelector('.red-button');
 redButton.onclick = function() {
 if (confirm("Tem certeza que deseja deletar este bloco?")) {
 newBlock.remove();
 }
 };
 document.querySelector('.content').appendChild(newBlock);
}

Oi amigo, deu certo mas quando fui implantar isso no meu sistema de vdd deu problema.

te passo um pix pra ajudar a implantar isso no meu dashboard, ok?

meu email: thiagoduarte1 (arroba) gmail.com , substitui essa msg de arroba por um de vdd e me manda um email, blz?