JSFiddle - React, Tailwind, and code Playground

by J. Jones

HTML

<form id="dragtoform" ondrop="drop(this,event)" ondragover="allowDrop(event)">
    <input type="hidden" name="foo" value="bar" />
    <img id="drop2" src="http://s27.postimg.org/jua3mu9q9/trash.jpg" />
</form>
<table>
    <tr>
        <td draggable="true" ondrop='dropTrash(event)' ondragstart='dragTxt(event)'>drag this text to the trash over there</td>
    </tr>
    <tr>
        <td draggable="true" ondrop='dropTrash(event)' ondragstart='dragTxt(event)'>or maybe drag this one instead</td>
    </tr>
</table>

CSS

#div1 {
    width:350px;
    height:70px;
    padding:10px;
    border:1px solid #aaaaaa;
}
#div {
    width:300px;
    height:100px;
    line-height:100px;
    border:5px dashed #CCC;
    font-family:Verdana;
    text-align:center;
}
#drop {
    background-color:red;
    width: 100px;
    height: 100px;
}

JavaScript

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

function dumpChildren(object) {
    var out = 'object is: ' + object + ". End of object.";
    if (object.childNodes != null) {
        if (object.childNodes.length > 0) {
            for (i = 0; i < object.childNodes.length; i++) {
                out += "child: " + object.childNodes[i] + ". ";
            }
        }
    }
    alert(out);
}

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

function dragTxt(ev) {
    ev.dataTransfer.setData("Text", ev.target.innerText);
}

function drop(frm, ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var input = document.createElement('input');
    input.type = "hidden";
    input.name = "item";
    input.id = "item";
    input.value = data;
    alert("input is: " + input);
    dumpChildren(frm);
    frm.appendChild(input);
    dumpChildren(frm);
    frm.submit();
}