[HTML 5] Elemente verschiben

  • Hallo miteinander,


    ich möchte eine Übersicht über den Status von Geräten erstellen, und das am besten mit HTML 5 oder Java Script.

    Leider ist mir beides nicht geläufig :(


    Ich habe im HTML und mit etwas CSS eine Kleine Übersicht gebaut wie ich mir das vorstelle.


    In Spalte 1: ist immer der Name des Gerätes

    Spalte 2 bis 26: ist der verbleib des Gerätes


    Unter der Tabelle habe ich zwei Elemente:


    Gelb: diese geht immer über 3 Spalten und ist für die Leitgabe gedacht.

    Das soll man per Drag and Drop in die Tabelle Ziehen können, Dabei soll eine Kopie des Elementes erstellt werden, wenn man es dann in der Tabelle hat soll man durch abtippen seinen Namen eintragen können, Wenn das Element schon in der Tabelle steht soll es auch in der Tabelle verschoben werden können hierbei soll keine Kopie entstehen. der Name soll im Nachhinein nicht verändert werden können.


    Rot: Das geht über die Gesamte Tabelle und soll wie beim gelben die selben Funktionen haben, nur das nicht der Name sondern eine Bemerkung eingetragen werden soll.


    Die Daten sollen nicht im Hintergrund gespeichert werden !


    Ist das ein Projekt das ich als Anfänger hin bekomme?

    oder ist das schon eine Nummer zu groß? für mich?


    Kann mir dabei jemand Helfen?

    ist das Schwer zu erstellen? was ich mir vorstelle?


    Gruß Mücke



    PS. HTML und CSS Datei habe ich angehängt.

    Über Feedback würde ich mich sehr freuen.


    Start_html.txt ist die HTML Datei

    design.txt ist die CSS Datei

  • Möglich ist das alles.

    Wie du das an besten als Anfänger hinbekommen solltest ist schwer zu sagen.

    Ich würde deine Beschreibung von oben nach unten abarbeiten und sobald eine sache läuft dann die nächste einbauen.


    Du könntest aber auch erstmal etwas Zeit in Goggel Investieren vieleicht findet sich da schon was fertiges oder was in derart was man dann nur noch etwas umbauen müsste

  • Hey,


    das mit Google habe ich schon versucht, ich glaube jedoch das ich nach den Falschen Suchbegriffen gesucht habe, zumindest habe ich nichts in dieser Art gefunden :-(.


    Was ich gefunden habe ist das hier: Natives Drag & Drop in HTML5 Nur leider habe ich das nicht mal auf meine DIV Boxen angewendet bekommen :-(.

    ich verstehe nicht was da wo hin geschrieben werden muss / soll :-(.


    wie ich gerne vorgehen würde.


    0. Layout erstellen

    1. die Zwei unteren Div Boxen verschiebbar machen

    2. Die Zwei unteren DIV Boxen Kopien wenn das erste mal verschoben

    3. Die Zwei unteren DIV Boxen beim ersten Verschieben Text abfragen vom User

    4. DIV Boxen in der Tabelle so einstellen das die Zwei Unteren Boxen drüber gelegt werden können.

    5. das verschieben der Zwei Boxen in der Tabelle zulassen ohne Kopien


    Jedoch fehlt mir der Ansatz.

    Was ich verstanden habe ist das es mit DIV Boxen wohl gut gehen soll daher habe ich daraus das Layout erst ein mal gebaut.


    Wenn ich etwas vergessen habe oder die reihen folge ändern sollte bin ich immer offen für vorschlage.


    Kann mir jemand da etwas weiterhelfen?

  • Zitat

    Nur leider habe ich das nicht mal auf meine DIV Boxen angewendet bekommen :-(.

    ich verstehe nicht was da wo hin geschrieben werden muss / soll :-(.

    Zitat

    Ist das ein Projekt das ich als Anfänger hin bekomme?

    Möglicher Weise hast Du dir da mit Drag&Drop wirklich etwas zu viel vorgenommen, wenn Du dich als Anfänger bezeichnest. Was bedeuten denn eigentlich diese beiden unteren Boxen? Möglicher Weise gibt es auch eine andere Lösung für dein Vorhaben ohne Drag&Drop.

  • Ich verstehe es nicht wo ich den Code der auf der Seite Natives Drag & Drop in HTML5 steht denn hin schreiben soll, denn HTML ist es ja nicht und CSS auch nicht :(


    ich dachte an Drag&Drop da es eine User freundliche Möglichkeit wäre ;-

    habe auch schon dran gedacht, das ganze per PHP zu machen, und beim Anklicken ein entsprechendes Formular aufgehen zu lassen in das man dann seine Daten eintragen kann, zum Speichern. Jedoch ist das finde ich nicht so User Freundlich, jedoch auch möglich :)


    html-seminar.de/woltlab/attachment/1975/


    Das ist ja die Seite die ich bisher gebaut habe, die Unteren Boxen ist die Gelbe und Rote Box gemeint.

    Das sollen die Muster Boxen sein die es gibt, die man in die Tabelle Kopien kann so oft man möchte.

    Bei jedem Kopiervorgang soll nach einem Text gefragt werden (Gelb Name) (Rot Bemerkung).

    Wenn die Kopierten Boxen ein mal in der Tabelle sind kann man die verschieben (nickt Kopieren) der Text soll jedoch nicht mehr geändert werden können.


    ps. warum werde ich nicht per Mail benachrichtigt bei antworten?



    Wie gesagt ich tue mich mit dem Beispiel der Webseite schon schwer und bekomme das nicht nach gebaut :( da ich nicht verstehe wo was hin kommt im Code HTML, HTML5, CSS.

  • Ich habe mal gesucht und Beispiele gefunden die du gebrauchen könntest

    https://basti1012.bplaced.net/…rdner=html-seminar&id=359

    da kannst du boxen von einem div in den anderen verschieben.


    Text ändern in ein div ,oder Tabelle wäre auch nicht schwer

    https://basti1012.bplaced.net/…rdner=html-seminar&id=360


    Was soll das eigentlich genau werden?

    Soll das eine Funktion in einem Shop werden , oder was soll damit passieren, wenn deine User das gemacht haben?

  • Cool, danke die Beispiel werde ich mir anschauen und durcharbeiten, und entsprechend zusammen führen und anpassen auf mich. DANKE.


    Ich habe ca. 25 Geräte die immer für 3 Stunden mit genommen werden und dann wider kommen (in der Regel)

    Jetzt möchte ich das jeder der das gerät mitnehmt sich in eine Liste einträgt, erste Spalte ist der Geräte Name, die Box die man dann in die Liste Kopiert mit seinem Namen bedeutet das man es mit genommen hat in seine Abteilung.

    So hat man schnell und einfach eine übersieht wo welches gerät gerade ist, am ende vom Tag müssen alle Geräte wider zurück gebracht werden.


    Es soll keine Archivierung werden wann wer was mit genommen hat daher auch keine Speicherung der Daten sondern nur ein Übersicht für den Aktuellen Tag.


    ich habe vor einen großen Monitor mit Maus / Tastatur bereit zu stellen so das es jeder nutzen kann.


    ich hoffe das man versteht was ich machen möchte.




    danke für die Beispiele, ich werde das zeitnah durcharbeiten und mich wider melden.

  • Erst mal vielen lieben dank für deine Links.

    Habe jetzt was zusammen gebaut :)


    Ich habe noch ein paar Probleme :(


    1. Beim Verschieben wird immer die Mitte der Box als neuer Pointe genommen, wie kann ich das auf die Linke Obere Ecke der DIV Box setzen?

    2. Beim ersten verschieben der Box soll eine Kopie erstellt werden, wie macht man so etwas?

    3. Den Text ändern in der Box klappt finde ich jedoch etwas Umständlich, hat jemand eine Idee wie man das besser darstellen könnte?

    eventuell kann man das ja per CSS so einstellen das wenn man den Text ändern kann die Hintergrund Farbe sich ändert?


    Habe alle Dateien angehängt, jedoch mit der Endung .txt versehen.


    Gruß Mücke

  • Es wäre kesser, wenn du deine Textdatei als Codepen zusammen baust, weil dann kann man da gleich dran arbeiten und außerdem lädt sich hier kaum einer Dateien runter.

    3. Den Text ändern in der Box klappt finde ich jedoch etwas Umständlich, hat jemand eine Idee wie man das besser darstellen könnte?

    eventuell kann man das ja per CSS so einstellen das wenn man den Text ändern kann die Hintergrund Farbe sich ändert

    Dafür gibt es Klassen, die man setzten und wegnehmen kann.

    Zb so


    https://basti1012.bplaced.net/…rdner=html-seminar&id=361

    Zu deinem Punkt 1

    Du redest bestimmt von den Beispiel Link, oder?

    Weil in deinen Code wird die Box da gesetzte wo man sie loslassen tut und ich denke, das willst du so, oder?


    Punkt 2.

    Wo soll die Kopie den hingesetzt werden?

    Wenn dann liest du den Code der Box aus ( outerHTML ) und packst ihn da hin wo du ihn haben willst (dabei muss drauf geachtet werden das die id nicht gedoppelt wird).

    Oder man kann auch Code Clonen. Aber da muss auch auf die id geachtet werden.

    Oder was andere was mir gerade nicht einfällt


    EDIT: Du hattest in deinen <head> Bereich in den meta Datein 2 Fehler drinne. Im Codepen sind die weg, doch du solltest da drauf achten weil dann einiges nicht laufen könnte.

    Denke mal das es beim Kopieren passiert ist, doch darf trotzdem passieren .

  • Die Beschreibung in Posting #7 ist sehr aufschlussreich. Was bedeutet denn das Verschieben, nachdem man sich mit Name und Bemerkung eingetragen hat? Das würde ja bedeuten, dass ein Mitarbeiter ein Gerät zurück gebracht hat (nach dem Verschieben ist Name/Bemerkung beim alten Gerät weg) und gleichzeitig ein anderes mitgenommen hat (nach dem Verschieben liegt Name/Bemerkung bei einem anderen Gerät).

  • Also das Codepen ist mir bis jetzt echt neu gewesen :(

    habe mich jetzt dort Registriert :)

    Wenn ich in deinem Code was ändre siehst du das dann ?


    Die Daten werden scheinbar zusammen geschrieben da in deinem Code kein Link zu CSS oder JS noch im Code zu finden sind.


    Das die Box dort abgelegt wird wo man mit der Maus los lässt ist richtig das soll sie auch.

    Wenn man die Box verschiebt sieht man auch wo sie abgelegt wird da die Box der Tabelle sich Blau verfärbt.


    Mit Kodieren meine ich.

    Wenn ich von unten die Gelbe oder Rote Box nehme und in die Tabelle Ziehe dann ist die Box unten ja nicht mehr da, ich möchte jedoch das die Box unten nicht verschwindet sondern eine Kopie der Box erstellt wird in der Tabelle wo ich sie los gelassen habe.

  • Wenn ein Mitarbeiter ein gerät mit nimmt, dann tränt er sich nicht wider aus ! sondern bleibt einfach drin stehen.


    wenn der Mitarbeiter ein anderes gerät mitnehmt, kann er seine Box einfach in der Tabelle verschieben, oder er zieht von den unteren Boxen (außerhalb der Tabelle) einfach eine neue Box in die Tabelle und Trägt sich noch mal ein.

  • Verstehe. Dann sehe ich allerdings nicht so großen Nutzen in dem Drag&Drop. Warum nicht einfach in der Tabelle zwei editierbare Textfelder hinzu fügen, wo der Mitarbeiter Name und Bemerkungen einträgt?

  • So ich habe den Code jetzt alles in der Codepen hochgeladen.

    Habe auch gesehen das du einiges im CSS geändert hast, danke.


    Ich hoffe das ich das Richtig gemacht habe: https://codepen.io/Muecke/pen/bPjMqa


    Mit deinem Code komme ich nicht ganz klar, er macht eine Kopie, in der DIV 'copybox' Ok, so hatte ich mir die Kopie nicht vorgestellt.


    ich habe noch einen kleinen Text auf der Seite mit eingebaut:

    Pool möglicher Boxen:

    die Orange und Rote Box unter der Tabelle sind Musterboxen, die sollen da immer stehen bleiben.

    Beim verschieben der Orange und Rote Box soll also eine Kopie der jeweiligen Box in die Tabelle erstellt wenden.


    Wenn die Orange und Rote Box schon in der Tabelle ist dann soll keine Kopie mehr entstehen sondern sie soll tatsächlich nur noch verschoben werden.

  • Also das was Sempervivum da schreibt wäre eigentlich um weiten einfacher.


    Kann aber auch verstehen das man es für den Mitarbeiter einfach halten will. Einfach ne Box ziehen ist einfacher.Obwohl die ja editierbar sind und den Namen trotzdem schreiben muß.

    Aber im Endeffekt mußt du ja wissen wie du es haben willst, ob einfach oder schwer muß man dann selber wissen.


    Zitat

    1. Wenn ich in deinem Code was ändre siehst du das dann ?

    2. Mit deinem Code komme ich nicht ganz klar, er macht eine Kopie, in der DIV 'copybox' Ok, so hatte ich mir die Kopie nicht vorgestellt

    3. Habe auch gesehen das du einiges im CSS geändert hast, danke.

    zu 1 Das geht glaube ich nur als Premium user .

    Der sinn bei Codepen ist das ich jetztin deinen Code rumspielen kann und dir nee Lösung sage , oder alles neu abspeichere und dir neuen Link geben kann


    zu 2 Das hatte ich halt so verstanden, aber andersrum die Boxen clonen sollte auch gehen, da gibt es bestimmt auch nee function die man in der DOKO dazu findet


    zu 3 Das ist das problem wenn man automatisch speichern aktiviert hat , das sollte da eigentlich nicht rein.

    Hatte das geändert weil ich am Anfang den Fehler nicht gefunden hatte weil die Boxen immer um mehrere Pixel wo anders angelegt wurden.

    Durch mein Css konnte ich das dann ausschliessen.


    Deine Css hat ja funktioniert , doch float und unnötige divs die mag ich nicht und mußten weichen


    EDIT:

    Zitat

    Die Daten werden scheinbar zusammen geschrieben da in deinem Code kein Link zu CSS oder JS noch im Code zu finden sind.

    als Premium kann man da auch css und js in extra datein schreiben und dann verlinken, kannst aber auch deine Links zum eigenen Server da eintragen notfalls .


    Aber bei Codepen und andere Anbiter hat man ja die Extra Felder HTML,CSS,JS wo man dan den Code aus den Links rein kopieren tut.Das ist dann das selbe und es ist für die helfer einfacher was zu finden

  • Sorry die Antwort von Sempervivum habe ich gestern übersehen, Sorry.

    Ich verstehe nicht ganz wie das gemeint ist mit den zwei Textfeldern in der Tabelle.


    Ich habe ca. 25 Mitarbeiter die Geräte mit nehmen können, die beiden unteren Boxen sind als Vorlage gedacht, die Vorlage soll jedoch immer vorhanden sein egal wie oft man die in die Tabelle gezogen hat.


    [OR] Codepen

    In zwischen finde ich das echt gut, danke das du mir das gezeigt hast.


    [CSS änderung] Das danke meine ich ernst und nicht Sarkastisch. ich habe mir alles mögliche im Netz zusammen gesucht und zusammen gebaut und verändert.

    Bei dir sieht der HTML und CSS Teil deutlich aufgeräumter aus :) Danke dafür das habe ich so übernommen.


    [Boxen werden wo anders angelegt]

    Genau das ist eins der Probleme.

    Die Gelbe Box ist so groß wie drei Boxen der Tabelle.

    Beim Ziehen der Gelben Box, egal wo die Maus sich befindet, wird immer die Mitte der Box genommen zum ablegen, das ist im Übrigen in deinem Code auch so. nur das bei dir die Box sich nicht mehr an die Tabelle anpasst. Woran liegt das?



    [die Boxen clonen]

    Ich verstehe den JS Teil überhaupt nicht :(


    Habe ich das so richtig verstanden?

    Der teil ist dafür da das ich die Boxen überhaupt verschieben kann:

    Code
    $('.normal').draggable({
        helper: 'clone'
    });

    Der Teil ist dafür da, wo ich die Box ablegen kann?

    Code
    $('.DD').droppable({
        accept: '.normal',
        hoverClass: 'hovering',
        drop: function(ev, ui) {
            ui.draggable.detach();
            $(this).append(ui.draggable);
        }
    });


    Wenn das so ist, dann müsste also in den Teil "$('.DD')" das mit dem clonen hinein?


    Oder habe ich das Falsch verstanden?

  • Ich habe einen Neuen Code: https://codepen.io/Muecke/pen/bPjMqa



    Was habe ich hin bekommen:

    1. Die Box aus dem Pool wird Kopiert und nicht verschoben

    2. Das ablegen erfolgt bei der Maus und die Box richtet sich nach der Tabelle aus


    Was mich dabei stört

    1. Ich habe im HTML Code doppelt die ID`s [id="ziel"] , wie kann ich das im JS auf eine class umschreiben?

    2. Es wird nicht mehr angezeigt in welcher Zelle abgelegt wird, ist vorher Blau im Hintergrund geworden

    3. Ich kann die Boxen in der Tabelle nicht mehr verschieben, wie kann ich die ID der Kopierten Box so abändern das eine weitere Bedingung ins JS eingebaut werden kann das dann verschoben wird?

    4. Das abändern des Textes geht auch nicht mehr. habe ich mit Absicht raus genommen, da ich nur noch unten im Pool den Text ändern konnte jedoch in der Tabelle dann nicht mehr, und wenn ich ein mal den Text geändert hatte konnte ich die Box nicht mehr verschieben/ Kopien


    Gruß Mücke



    [EDIT]

    3. verschieben in der Tabelle, habe ich zum teil hin bekommen.

    Beim Kopien wird eine Neue ID erstellt.

    nodeCopy.id = "newId";

    Die kann ich abfragen, und sagen das es dann verschoben werden soll, jedoch wenn mehr als 1 mal die selbe Box (normal) in der Tabelle sich befindet ist auch die ID mehrmals vorhanden was zu Fehlern führt beim verschieben des Elementes. Habt Ihr eine Idee wie ich das in den Griff bekommen kann, das die ID sich ändert? ich die dennoch abfragen kann?

  • so langsam veriere ich den überblick.

    Kannst du jetzt nochmal sagen was in deinen gepostet Cdepen noch rein muß ?

    Weil verschieben geht ja und unten die Boxen bleiben ja stehen wie du wolltest , also so das du ja immer nee Kopie hast .

    Die Felder sind jetzt nicht mehr editierbar, ist das gewollt ?


    Also beschreib nochmal was da jetzt noch rein muß ?


    dadurch das du jetzt jeden <div container die gleiche id gegeben hast und keine eventlistener mehr nutzt , finde ich das du es jetzt noch unübersichlicher machst. und gleiche id's geht gar nicht.

  • Das ist ja in diesem Forum an der Tagesordnung: Weitschweifigkeit gewinnt, Substanz hat keinen Stellenwert.

    Das wahr keine Absicht, du hast aber schon gesehen das ich dazu geschrieben habe das ich nicht verstanden habe was du mir sagen wolltest? daher konnte ich auch schlecht drauf eingehen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!