Formular input/textarea mit Drag and Drop füllen

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

Taberna

Mitglied
4 März 2017
61
0
6
48
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>
 

basti1012

Senior HTML'ler
26 November 2017
1.227
120
63
39
Minden
sebastian1012.bplaced.net
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
 

Taberna

Mitglied
4 März 2017
61
0
6
48
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.
 

basti1012

Senior HTML'ler
26 November 2017
1.227
120
63
39
Minden
sebastian1012.bplaced.net
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>
 

Taberna

Mitglied
4 März 2017
61
0
6
48
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
 

basti1012

Senior HTML'ler
26 November 2017
1.227
120
63
39
Minden
sebastian1012.bplaced.net
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
 

Taberna

Mitglied
4 März 2017
61
0
6
48
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.721
332
83
67
Beliebig viele Elemente kannst Du hereinziehen, wenn Du das neue Element hinzu fügst, anstatt value neu zu setzen. Und im drop-Callback kannst Du auch prüfen, ob das Element schon vorhanden ist.
Also der drop-Callback müsste so aussehen:
Code:
    $( "#droppable" ).droppable({
        accept: ".draggable",
        drop: function( event, ui ) {
            var draggedItem = ui.draggable[0].dataset.value;
            if ($(this).val().indexOf(draggedItem) == -1) {
                $(this).val($(this).val() + draggedItem);
            }
        }
    });
 

basti1012

Senior HTML'ler
26 November 2017
1.227
120
63
39
Minden
sebastian1012.bplaced.net
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
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.721
332
83
67
Man kann noch das Zurückfliegen dynamisch machen, je nachdem ob das Element schon vorhanden ist oder nicht:
Code:
        $(".draggable").draggable({
            opacity: 0.7,
            helper: "clone",
            revert: false
        });
        $("#droppable").droppable({
            accept: ".draggable",
            drop: function (event, ui) {
                var draggedItem = ui.draggable[0].dataset.value;
                if ($(this).val().indexOf(draggedItem) == -1) {
                    $(this).val($(this).val() + draggedItem);
                    setTimeout(function () {
                        $(ui.draggable[0]).draggable("option", "revert", true);
                    }, 10);
                }
            }
        });
 

Taberna

Mitglied
4 März 2017
61
0
6
48
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.
 

basti1012

Senior HTML'ler
26 November 2017
1.227
120
63
39
Minden
sebastian1012.bplaced.net
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
 

Taberna

Mitglied
4 März 2017
61
0
6
48
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.721
332
83
67
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
Das habe ich gerade getestet. Vermutlich hast Du sie mit echo ausgegeben, dann wird ein Zeilenumbruch in ein Leerzeichen umgewandelt. Die Zeilenumbrüche sind jedoch im Text noch da und Du kannst den Text z. B. mit explode in ein Array zerlegen, dann hast Du die Begriffe wieder getrennt:
Code:
var_dump($_POST);
var_dump(explode("\n", $_POST['text']));
 

Taberna

Mitglied
4 März 2017
61
0
6
48
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....