How to join texts in a textbox by dragging them?

Question

How to join texts in a textbox by dragging them?

Navigation

#1 by (2 votes)

2

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

+ , - , * , / , palavra1 , palavra2

so on.

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

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

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

javascript jquery html5

asked by anonymous 10.10.2017 / 20:15

1 answer

JavaScript - Doubt when manipulating values of div's with variables Recursive Algorithm does not work

score 2 · Accepted Answer

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>

You can run to test, I think this solution fits you perfectly.