Drag and Drop para arrastar imagem

[Thiago Duarte 23]

Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc

 

Alguem pode me ajudar?

[tetsuo 0]

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?

[Thiago Duarte 23]

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 

1. "if (type === "menu") {
2.     content = "<nav class='navbar navbar-expand-lg navbar-light bg-light'>" +
3.                 "<a class='navbar-brand' href='#'>Navbar</a>" +
4.                 "<button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarSupportedContent' aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation'>" +
5.                   "<span class='navbar-toggler-icon'></span>" +...."

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

 

entendeu o que preciso?

[wanderval 19]

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]);

 

[Thiago Duarte 23]

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

deveria funcionar no xampp né?

 

[wanderval 19]

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;
    }
}

 

[Thiago Duarte 23]

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

 

..

[wanderval 19]

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);
}

 

[Thiago Duarte 23]

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?