2

Tenho uma textbox vazia, e tenho alguns botões com valores como:

+, -, *, /, palavra1, palavra2

assim por diante.

Quero preencher esse textbox arrastando esses botoes para dentro dele, não apenas clicando neles, vi algo que pode ser feito no HTML5/Javascript, mas não consegui solucionar.

Obs: Eu Clicaria e segurando o mouse arrastaria esse botão para dentro da textbox e a textbox pegaria o valor desse botão, como se fosse um verdadeiro lego montando dentro da textbox as strings.

Obs 2: Tem que ser com botões ou inputs, não com imagens.

1 Resposta 1

2

Isso pode ser resolvido utilizando html e javascript.

O seu html ficaria assim:

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

        function drag(ev)
        {
            ev.dataTransfer.setData("Text",ev.target.id);
        }

        function drop(ev)
        {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            ev.target.innerHTML+=" <p>"+document.getElementById(data).innerHTML+"</p>";
            
        }
.div 
        {
            width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;
        }
<div class="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="div" ondrop="drop(event)" ondragover="allowDrop(event)">
    <button id="drag1" draggable="true" ondragstart="drag(event)" width="336" height="69">Code</button>
    <button id="drag2" draggable="true" ondragstart="drag(event)" width="336" height="69">Code</button>
</div>

Pode rodar para testar, acho que esta solução atende perfeitamente você.

9
  • Obrigado pela resposta, eu rodei aqui, mas por algum motivo, eu tento arrastar o botão para essa div, e ele não pega o valor e não realiza nada, testei no meu projeto e também não rodou. 10/10/2017 às 18:25
  • coloca seu codigo inteira que ae tentamos fazer rodar, como ele em sites de javascript online, ex: jsfiddle.net 10/10/2017 às 18:26
  • jsfiddle.net/9kx6zvva 10/10/2017 às 18:31
  • 1
    eu utilizei o próprio exemplo seu, e não funcionou aqui, porem achei outros exemplos parecidos e também não rodaram muito bem, acredito que o problema esteja na minha maquina, porem sua resposta está correta de certa forma. 10/10/2017 às 19:18
  • 1
    achei o problema, era meu mouse que não selecionava kk, muito obrigado pela paciencia, topico solucionado. 10/10/2017 às 19:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .