I am working on a project with draggable buttons and a droppable textarea. When I drag a button onto the textarea, it displays some code. If I drag another button, the text related to that button is added to the existing code.
My query is how can I insert the text from my next button between those two snippets of code?
This snippet shows the code I am using:
Script:
$("button").click(function () {
$("#div1").empty();
});
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData('Text/html', ev.target.id);
}
function drop(ev, target) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text/html");
var function1 = "test1{ \n\n\n}";
var function2 = "test2{ \n\n\n}";
var variable1 = "var first;";
var variable2 = "var second;";
console.log("****",target);
if (data == "test1") {
if (data) {
$('#div1').append(function1);
}
}
if (data == "test2") {
if (data) {
$('#div1').append(function2);
}
}
if (data == "test3") {
if (data) {
$('#div1').append(variable1);
}
}
if (data == "test4") {
if (data) {
$('#div1').append(variable2);
}
}
}
HTML:
<table>
<tr>
<td>
<button id="test1" ondragstart="drag(event)" draggable="true">Function-1</button><hr>
<button id="test2" ondragstart="drag(event)" draggable="true">Function-2</button><hr>
<button id="test3" ondragstart="drag(event)" draggable="true">Variable-1</button><hr>
<button id="test4" ondragstart="drag(event)" draggable="true">Variable-2</button><hr>
</td>
<td>
<textarea id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)"></textarea>
</td>
</tr>
</table>
<br>
<button>Clear</button>
Fiddle: http://jsfiddle.net/ktL02h7u/16/