• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Formular input/textarea mit Drag and Drop füllen

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>
 
Werbung:
Dafür hat Jquery kleine helferlein

Javascript:
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
   .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 ) {
        $(this).val(ui.draggable[0].dataset.value);
      }
    });
</script>
</body>
</html>
Falls du das überhaupt so meinst
 
Hallo Basti,
das ist genau das, was ich gesucht habe. Insbesondere ist es cool, dass ich jeden Begriff nur einmal zuweisen kann. Das ist optimal für meine gedachte Anwendung.
Kann man das noch so erweitern, dass ich mehrere Listeneinträge zuweisen kann ? Allerdings darf jeder Listeneintrag auch weiterhin nur einmal in der textarea zugeteilt werden.
 
Werbung:
So wie der Code jetzt ist brauchst du ja nur dazu schreiben
Code:
<li data-value="Banane" class="draggable">Banane</li>
<li data-value="Kirsche" class="draggable">Kirsche</li>
<li data-value="Apfel" class="draggable">Apfel</li>

<li data-value="Hund" class="draggable">Hund</li>
<li data-value="Katze" class="draggable">Katze</li>
<li data-value="Maus" class="draggable">Maus</li>
 
Moin Basti,

hatte mich wohl unglücklich ausgedrückt.
Die Liste zu erweitern war mir schon klar. Mir ging es um folgendes:
Ich möchte in das textarea feld, dass es möglich ist Banane und Kirsche einzutragen, und wenn man Lust hat auch noch Hund.
Allerdings soll es nicht möglich sein, Hund mehrmals einzutragen.
Aktuell ist im textarea ja nur ein Eintrag möglich.

Hoffe, es ist nun verständlicher
 
also du willst zb HUND in den Textarea reinschreiben , und nicht rein ziehen.
Aber trotzdem sollen die anderen Auawahlen auch noch reinzieh bar sein ?

Theoretisch ist mit JS fast alles möglich.
Man müsste mal die dokumentations von Jquery ui durchlesen ob es dafür schon nee Lösung gibt.
Falls das nicht vorgesehen ist müßte man da was mit js basteln
 
Werbung:
Es soll quasi eine Liste geben
li(1)
li(2)
li(3)
...
li(n)

und eine textarea, in die du die Elemente rein ziehen sollst.
Es sollen beliebig viele Elemente in die textarea zu ziehen sein, aber jedes Element nur einmal möglich sein, also das element li(x) soll maximal einmal in die textarea gezogen werden können.
 
Da gibt es nichts mehr zu ergänzen.
Jenachdem was du vor hast kannst du auch die Listen Punkte löschen die du da schon rein gedroppt hast.
Code:
    $( "#droppable" ).droppable({
      accept: ".draggable",
        drop: function( event, ui ) {
            var draggedItem = ui.draggable[0].dataset.value;
            $(ui.draggable).remove();
            $(this).val($(this).val() +draggedItem+'\n');
        }
    });
Das ist aber geschmackssache.
Das '\n' am Ende ist dafür das die gedroppten Elemente untereinander stehen,
kannst du auch mit ein Punkt oder Komma ersetzen
 
Ihr seid schon echt geile Typen, muss ich mal sagen...
ich habe das Script jetzt bei mir eingefügt, und es funktioniert echt super....
ihr habt mir schon echt super geholfen, bzw. mein Problem gelöst...
Nun habe ich im Grunde nur noch ein Problem.
Das ganze wird ja nun in die Textarea eingetragen und da es Elemente gibt, die aus mehreren Worten bestehen,
li(1) gelbes Haus
li(2) grünes Auto
li(3) orange Orange
...
li(n)

enthält mein Textfeld dann Einträge wie z.B. "gelbes Haus grünes Auto orange Orange"

Ich bräuchte also im Textfeld ein eindeutiges Zeichen, wo ein Element zu Ende ist und ein neues beginnt.
Ich habe schon etwas mit "+draggedItem+';\n'", aber dann trägt er das Trennungszeichen sichtbar mit in der Textarea ein, und das würde ich gerne nicht sichtbar für den Anwender haben....

Wenn das zu viel Aufwand wird, dann löse ich das anders, aber vielleicht ist es ja nur eine Kleinigkeit.
 
Werbung:
dann mach doch einfach ein Komma dahinter oder so
Das '\n' am Ende ist dafür das die gedroppten Elemente untereinander stehen,
kannst du auch mit ein Punkt oder Komma ersetzen

Du schreibst das du eine eindeutige Trennung haben willst damit der neue Eintrag erkennbar ist.
und du schreibst das du sichtbare Trennungszeichen nicht haben willst .
Das mußt du mal genauer erklären.

Wenn du das mit den \n machst stehen deine Einträge untereinander
 
Dann machst du was falsch
 
Zuletzt bearbeitet:
Werbung:
dann mach doch einfach ein Komma dahinter oder so


Du schreibst das du eine eindeutige Trennung haben willst damit der neue Eintrag erkennbar ist.
und du schreibst das du sichtbare Trennungszeichen nicht haben willst .
Das mußt du mal genauer erklären.

Wenn du das mit den \n machst stehen deine Einträge untereinander

Erstmal vielen Dank für die Seite codepen, die ist echt cool, kannte ich noch nicht.

hatte das mit dem Text "besser erklären" eben erst gesehen.
also:
Ich versuche es mal:
Alle gezogenen Listeneinträge werden ja ins Textarea kopiert und durch \n erhalte ich sie untereinander sortiert.
wenn ich das Formular dann mit "action=post" versende und mir die Variable $_POST["textfeld" ausgeben lasse, dann stehen alle Einträge mit einem Leerzeichen getrennt. Da ich aber Listeneinträge habe, die bereits ein Leerzeichen enthalten z.B: "orange Orange" ist das Leerzeichen keine eindeutige Trennung einzelner Listenelemente, sondern das Leerzeichen kann ja Bestandteil des Listeneintrag sein.

Wenn ich das Script verändere und Beispielsweise +draggedItem+',\n' verwende, dann habe ich in $_POST["textfeld"] das Komma als trennendes Element, aber dann wird es auch im Dropdown-Feld mit eingetragen. Und da möchte ich es nach Möglichkeit nicht haben, sondern nur in der $_POST["textfeld"].

Ich hoffe, dass ich es nun verständlicher ausgedrückt habe.
 
Wie geil..... Das ist genau das, was ich gesucht habe....
Ich danke allen, die sich Gedanken zu dem Thema gemacht haben....
Nun komme ich erstmal wieder allein zurecht....
 
Zurück
Oben