How to join texts in a textbox by dragging them?

Question

I have an empty textbox, and I have some buttons with values like:

+, -, *, /, palavra1, palavra2

so on and so forth.

I want to fill this textbox by dragging these buttons into it, not just by clicking on them, I saw something that can be done in HTML5/Javascript, but I couldn’t solve it.

Note: I would click and hold the mouse and drag this button inside the textbox and the textbox would pick up the value of this button, as if it were a true lego by mounting inside the textbox the strings.

Note 2: It has to be with buttons or inputs, not with images.

Answer 1

This can be solved using html and javascript.

Your html would look like this:

  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>

Can run to test, I think this solution perfectly suits you.