Formular input/textarea mit Drag and Drop füllen
Hallo liebe Community,
ich brauche mal wieder Hilfe. Bin in JS leider nicht wirklich fit.
Das Grundproblem ist folgendes:
Ich möchte ein textarea bzw inputfeld über drag and drop füllen können.
ich habe ein Script gefunden, dass DaD ermöglicht und in einen Div-Container einträgt. Habe auch schon verstanden, dass sich dadurch der Code der Seite erweitert.
Leider kann ich es aber nicht allein transferieren, so dass ich es in ein Textarea eintragen kann.
Vielleicht kann mir jemand helfen, wie ich das realisieren kann.
LG
Der hier verwendete Code
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/js_webseite/jquery.js"></script>
<script src="/js_webseite/jquery-ui.js"></script>
<style>
#test1{
font-size:10vw;
}
.leftbox{
height:100px;
width:100px;
border:1px solid black;
}
</style>
</head>
<ul>
<li data-value="Banane" class="draggable">Banane</li>
<li data-value="Kirsche" class="draggable">Kirsche</li>
<li data-value="Apfel" class="draggable">Apfel</li>
</ul>
<textarea id="droppable" class="leftbox"></textarea>
<script>
$( ".draggable" ).draggable({
opacity: 0.7,
helper: "clone",
revert: true
});
$( "#droppable" ).droppable({
accept: ".draggable",
drop: function( event, ui ) {
var draggedItem = ui.draggable[0].dataset.value;
$(ui.draggable).remove();
$(this).val($(this).val() +draggedItem+'\n');
//console.log($('textarea').val())
}
});
</script>
</body>
</html>