Taberna
Mitglied
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.
Also von <DIV></DIV> in ->> <DIV>Eintrag</DIV>
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
Hier übrigens das verwendete Script
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<script type="text/javascript">
window.onload = function () {
var ul = document.getElementsByTagName("ul")[0];
var div = document.getElementsByTagName("div")[0];
ul.addEventListener("dragstart", function(e) {
e.dataTransfer.setData("auswahl", e.target.dataset.value);
});
div.addEventListener("dragover", function(e) {
e.preventDefault();
});
div.addEventListener("drop", function(e) {
var p = document.createElement("p");
p.appendChild(
document.createTextNode(
e.dataTransfer.getData("auswahl")
)
);
div.appendChild(p);
})
};
</script>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li data-value="Banane" draggable="true">Banane</li>
<li data-value="Kirsche" draggable="true">Kirsche</li>
<li data-value="Apfel" draggable="true">Apfel</li>
</ul>
<div class="leftbox">
</div>
</body>
</html>
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.
Also von <DIV></DIV> in ->> <DIV>Eintrag</DIV>
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
Hier übrigens das verwendete Script
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<script type="text/javascript">
window.onload = function () {
var ul = document.getElementsByTagName("ul")[0];
var div = document.getElementsByTagName("div")[0];
ul.addEventListener("dragstart", function(e) {
e.dataTransfer.setData("auswahl", e.target.dataset.value);
});
div.addEventListener("dragover", function(e) {
e.preventDefault();
});
div.addEventListener("drop", function(e) {
var p = document.createElement("p");
p.appendChild(
document.createTextNode(
e.dataTransfer.getData("auswahl")
)
);
div.appendChild(p);
})
};
</script>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li data-value="Banane" draggable="true">Banane</li>
<li data-value="Kirsche" draggable="true">Kirsche</li>
<li data-value="Apfel" draggable="true">Apfel</li>
</ul>
<div class="leftbox">
</div>
</body>
</html>
