jquery draggable aus container ziehen

  • ich habe einen Container mit smilies. Die sollen mit draggable in einen Input Feld gezogen werden.

    Innerhalb des Containers kann man sie bewegen.

    Aus den Container raus geht nicht weil er am Container Rand stehen bleibt.

    Habe schon versucht das beim drag Event den gezogenen Smilie ein Fixed zu geben ,was Theoretisch auch geht.Doch dazu müßte man wieder Maus positionen und so weiter auslesen.

    Habe auch bei der jquery UI Seite mal geschaut ,doch ich finde irgendwie nix was mir dabei hilft.

    Es soll auf jedenfall ein Smilie mit ziehen oder klicken ( klicken hat bei mir nicht geklappt ,bin zur Zeit wohl zu blöd )

    in das obere Input Feld gelangen.


    CSS und Anordnung vom HTML kann nicht so einfach geändert werden, es sollte mit einen JS Code funktionieren.


    Habe mal alles wichtige aus meiner Sete rauskopiert ,so das man sehen kann was das Problem ist

    https://codepen.io/basti1012/pen/NmpmKm?editors=1000

  • Ich glaub es ist wieder soweit das mein Gehirn mich ver... will.

    Mit visibility tut sich bei mir gar nix.

    Ist aber sowieso komisch weil das Startergebniss ja auch schon anders ist. Be dir wird der Smilie unsichtbar und bei mir kann ich bis zum Rand schieben ,bzw halb darunter.


    Aber Du kannst das CSS nicht ändern? Dann vielleicht mit JS die betr. Anweisung überschreiben?

    Etwas ändern geht schon . Nur sowas wie alles in ein Container zu packen ( womit das problem gelöst wäre ) ist nicht möglich. Auch solche geschichten mit position relative und absolute kann ich da auch nicht gebrauchen. Wenn man da was dran ändern würde müßte man mit etwas Pech ja den anderen Rest vom Chat auch wieder anpassen.


    Aber mal abgesehen davon sehe ich gerade an diesen Script auch noch ein Problem wo ich noch nicht richtig drüber nach gedacht habe. Wenn der Smilie ins input gezogen wird bleibt er ja erstmal da liegen wo ich ihn los gelassen habe.


    Nur wenn in den Input schon ein Text steht und ich dem Smilie mitten im Satz loslasse ,soll er auch mitten im Satz als Unicode stehen

  • Besten Dank .

    overflow:visible ?

    Ehrlich gesagt kannte ich das noch gar nicht. Vieleicht mal gesehen und gedacht das wäre ein Fehler oder so.

    Aber es geht schon mal das ist sehr gut . Das andere das der Smilie auch da abgesetzt wird wo ich ihn loslasse werde ich erstmal mit drag und dropgabble versuchen. Mal kucken was in der Doko da steht ob es da nee Hilfe gibt wegen der richtigen stelle im Satz einzufügen .

  • Ich halte das mit dem Festlegen der Position für nicht ganz trivial: Die Schrift ist fast immer eine Proportionalschrift und dann ist es schwer, aus der Mausposition die Zeichenposition zu ermitteln. Ich würde mir statt dessen die Cursorposition im Text merken und dort das Smilie einfügen.

  • Das mit der Cursor position wahr eigentlich nee gute Idee. Doch beim tun und machen und so weiter muss ich sagen das es jetzt mit den einfachen reinziehen auch so geht ohne großartig Mausposition oder so auszulesen. Er läst die Smilies auch mitten im Wort fallen wenn man will. Beim auslesen des Input Feldes wird der Smilie als Bild angezeigt. Was wahrscheinlich auch kein Problem sein sollte beim heutigen Code.

    Doch ich wollte es versuchen das beim draggale beim loslassen der Smilie umgewandelt wird in Unicode oder so .


    Für das umwandeln habe ich auch schon was gefunden.

    Doch jetzt stehe ich eigentlich beim einfachsten Code fest. Smilie wird gehalten und dann will ich den data-code auslesen,oder irendwas anderes von den gehaltenen Smilie damit ich das umwandeln kann ,oder den vorher umgewandelten Code aus den data-code="" .hole.

    Doch ich kriege das heute nicht hin. Immer undefined oder sonst was , nur nix womit ich arbeiten kann. Nicht mal $(this).html() geht . Habe erst ohne jquery versucht was gar nicht ging. Dachte ich versuche es dann mit Jquery weil das immer klappte. Doch kriege beides nicht hin . Ich glaube mein Hirn rostet so langsam. schon 1000 mal mit this und data sachen ausgelesen und jetzt rostet mein Dach.


    Das habe ich jetzt

    https://codepen.io/basti1012/pen/NmpmKm?editors=1010