Drag&Drop von Textarea (inkl. WYSIWYG) mit Sortable Funktion

da.eXecutoR · 26.12.2009, 16:45

Hallo Community!

Ich hoffe Ihr habt alle schöne Feiertag und die Wünsche gingen bei euch in Erfüllung!

Ein Geschenk hat mir leider der Weihnachtsmann noch nicht gebracht und das ist die Lösung für eines meiner Vorhaben.

Wie im Titel beschrieben würde ich gerne dyn. Textarea's von einer Navigation zum Beispiel ( dort als Graphik ) in den Editorenbereich ziehen und dort dann ein neues Textarea inkl. WYSIWYG Editor ( z.Bsp. TinyEdit ) erscheinen lassen.

Dies mal der erste Schritt. Zweite Bedingung ist dass sich die Editoren dann via Drag&Drop in der Reihenfolge verschieben lassen.

Ich weiss nicht ob das wirklich machbar ist und wenn ja, welches JS Framework wäre wohl die beste Wahl? Mootools, jQuery und scriptjalous bieten alle die Möglichkeiten dazu. Kleiner Erfahrungsinput von euch würde mir da sicher helfen!

Background: Der Autor soll auf einer Website Tutorials schrieben können. Diese Tutorials umfassen verschiedene "Textbausteine", zum Beispiel Einführung, Übersicht, Bemerkung, Vorsicht, Warnung, Hinweis, Lösung, Link, Download etc. Damit der Autor seinen Artikel so gestalten kann wie er es braucht möchte ich eben dass sich von der "Werkzeugleiste" aus die verschiedenen Bausteine in den Editorenbereich ziehen lassen wo man dann die Seite mit den verschiedenen Bausteinen gestalten kann. Da mal was vergessen werden kann, soll die Liste mit Bausteinen ( also in dem Fall WYSIWYG Editoren ) verschiebbar sein.

Vielen Dank für eure Hilfe!

Noch schöne Feiertage!

da.eXecutoR

draco88 · 26.12.2009, 21:18

Welche Framework du benutzt ist Geschackssache, die können alle mehr oder minder das Gleiche.

Ich benutzte prototype, deshalb erklär ich mal, wie man es mit prototype macht(geht mit den anderen FW's ähnlich).
Ich würd eingach die Navigationspunkte als Draggables machen und den Editorbereich als Dropable, dann kann man die Links auf den Editorbereich ziehen. Beim droppen würd ich dann über die ID per Ajax den Editor oder nur den Content für den Editor für die ausgewählte Seite laden.

Ich hoffe ich hab richtig verstanden, was du gemeint hast

Dark Guardian · 27.12.2009, 15:15

UI/API/1.7.2/Droppable - jQuery JavaScript Library
UI/API/1.7.2/Sortable - jQuery JavaScript Library

Ich bin Vertreter der jQuery Fraktion

So wie draco bereits gesagt hat wäre es eine Möglichkeit. Ich enke aber das ein Tutorial immer mindestens einen Textbaustein enthalten wird oder? Somit wäre das nachladen des Editors nicht unbedingt nötig sondern per Methode clone() einfach zu dublizieren. Zusätzlich passt man noch den Namen des Editor Objektes an um den richtigen Kontext zu haben und den Rest amchen die Framework Plugins.

da.eXecutoR · 30.12.2009, 10:59

Hi Guardian

Danke für dein Post. Also ich hab die ganze Umsetzung, vor deinem Post

, mit mootools mal gestartet. Das mit dem Drag&Drop hab ich im Moment mal noch weggelassen. Im Moment wird einfach ein neues Objekt ans Ende der Liste angefügt wenn ich auf eines der Werkzeuge klicke.

Das funktioniert soweit auch, die Sortierung an sich funktioniert eigentlich auch. Das einzige Problem welches ich habe ist dass wenn ich nach dem hinzufügen des Objekts den TinyMCE das textarea konvertieren lasse, dieses sich nachher nicht mehr im <li> befindet sondern ausserhalb:

Code:

<div id="listArea">
    <ol id="todo">
      <li id="item-1" style="display: inline; background-color: transparent;">
        <div id="handle-1" class="drag-handle"/>
        <textarea id="item-1" class="sys_comment" typ="text"/>
      </li>
      <span id="item-1_container" class="mceEditor defaultSimpleSkin">
    </span>
  </ol>
</div>

Wenn das <span> Tag innerhalb des <li> erstellt würde, könnte man den Editor auch verschieben und das Problem wäre gelöst!

Das tuts aber nicht, any idea?

Gruss & vielen Dank für eure Inputs!

eXe

Chriz · 30.12.2009, 14:10

Mit YUI gehts natürlich auch:
YUI Library Examples: Drag & Drop: Reordering a List

Zugegeben ist der Code relativ lange, dafür hast du auch Einfluß auf jeden einzelnen Vorgang. Ich habe aber keinen Vergleich zu anderen Frameworks, vielleicht ist da die Handhabe etwas einfacher dun trotzdem so flexibel wie bei YUI, bzw. wie du es benötigst.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
JS: Einführung - Javascript im Schichtenmodell	nikosch	Tutorials	4	11.04.2009 17:06
PHP-GTK Tutorial		Beitragsarchiv	9	02.11.2005 21:07
(schnellere) Funktion zum Zusammenfassen von CSS		PHP-Fortgeschrittene	21	08.08.2005 16:47

26.12.2009, 16:45
da.eXecutoR Erfahrener Benutzer Registriert seit: 08.08.2009 Beiträge: 195 PHP-Kenntnisse: Fortgeschritten	Drag&Drop von Textarea (inkl. WYSIWYG) mit Sortable Funktion Hallo Community! Ich hoffe Ihr habt alle schöne Feiertag und die Wünsche gingen bei euch in Erfüllung! Ein Geschenk hat mir leider der Weihnachtsmann noch nicht gebracht und das ist die Lösung für eines meiner Vorhaben. Wie im Titel beschrieben würde ich gerne dyn. Textarea's von einer Navigation zum Beispiel ( dort als Graphik ) in den Editorenbereich ziehen und dort dann ein neues Textarea inkl. WYSIWYG Editor ( z.Bsp. TinyEdit ) erscheinen lassen. Dies mal der erste Schritt. Zweite Bedingung ist dass sich die Editoren dann via Drag&Drop in der Reihenfolge verschieben lassen. Ich weiss nicht ob das wirklich machbar ist und wenn ja, welches JS Framework wäre wohl die beste Wahl? Mootools, jQuery und scriptjalous bieten alle die Möglichkeiten dazu. Kleiner Erfahrungsinput von euch würde mir da sicher helfen! Background: Der Autor soll auf einer Website Tutorials schrieben können. Diese Tutorials umfassen verschiedene "Textbausteine", zum Beispiel Einführung, Übersicht, Bemerkung, Vorsicht, Warnung, Hinweis, Lösung, Link, Download etc. Damit der Autor seinen Artikel so gestalten kann wie er es braucht möchte ich eben dass sich von der "Werkzeugleiste" aus die verschiedenen Bausteine in den Editorenbereich ziehen lassen wo man dann die Seite mit den verschiedenen Bausteinen gestalten kann. Da mal was vergessen werden kann, soll die Liste mit Bausteinen ( also in dem Fall WYSIWYG Editoren ) verschiebbar sein. Vielen Dank für eure Hilfe! Noch schöne Feiertage! da.eXecutoR


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

26.12.2009, 21:18
draco88 Erfahrener Benutzer Registriert seit: 01.12.2009 Beiträge: 645 PHP-Kenntnisse: Fortgeschritten	Welche Framework du benutzt ist Geschackssache, die können alle mehr oder minder das Gleiche. Ich benutzte prototype, deshalb erklär ich mal, wie man es mit prototype macht(geht mit den anderen FW's ähnlich). Ich würd eingach die Navigationspunkte als Draggables machen und den Editorbereich als Dropable, dann kann man die Links auf den Editorbereich ziehen. Beim droppen würd ich dann über die ID per Ajax den Editor oder nur den Content für den Editor für die ausgewählte Seite laden. Ich hoffe ich hab richtig verstanden, was du gemeint hast

27.12.2009, 15:15
Dark Guardian Erfahrener Benutzer Registriert seit: 10.10.2009 Beiträge: 2.630 PHP-Kenntnisse: Fortgeschritten	UI/API/1.7.2/Droppable - jQuery JavaScript Library UI/API/1.7.2/Sortable - jQuery JavaScript Library Ich bin Vertreter der jQuery Fraktion So wie draco bereits gesagt hat wäre es eine Möglichkeit. Ich enke aber das ein Tutorial immer mindestens einen Textbaustein enthalten wird oder? Somit wäre das nachladen des Editors nicht unbedingt nötig sondern per Methode clone() einfach zu dublizieren. Zusätzlich passt man noch den Namen des Editor Objektes an um den richtigen Kontext zu haben und den Rest amchen die Framework Plugins. __________________ "Alles im Universum funktioniert, wenn du nur weißt wie du es anwenden musst".

30.12.2009, 10:59
da.eXecutoR Erfahrener Benutzer Registriert seit: 08.08.2009 Beiträge: 195 PHP-Kenntnisse: Fortgeschritten	Hi Guardian Danke für dein Post. Also ich hab die ganze Umsetzung, vor deinem Post , mit mootools mal gestartet. Das mit dem Drag&Drop hab ich im Moment mal noch weggelassen. Im Moment wird einfach ein neues Objekt ans Ende der Liste angefügt wenn ich auf eines der Werkzeuge klicke. Das funktioniert soweit auch, die Sortierung an sich funktioniert eigentlich auch. Das einzige Problem welches ich habe ist dass wenn ich nach dem hinzufügen des Objekts den TinyMCE das textarea konvertieren lasse, dieses sich nachher nicht mehr im <li> befindet sondern ausserhalb: Code: <div id="listArea"> <ol id="todo"> <li id="item-1" style="display: inline; background-color: transparent;"> <div id="handle-1" class="drag-handle"/> <textarea id="item-1" class="sys_comment" typ="text"/> </li> <span id="item-1_container" class="mceEditor defaultSimpleSkin"> </span> </ol> </div> Wenn das <span> Tag innerhalb des <li> erstellt würde, könnte man den Editor auch verschieben und das Problem wäre gelöst! Das tuts aber nicht, any idea? Gruss & vielen Dank für eure Inputs! eXe

30.12.2009, 14:10
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Mit YUI gehts natürlich auch: YUI Library Examples: Drag & Drop: Reordering a List Zugegeben ist der Code relativ lange, dafür hast du auch Einfluß auf jeden einzelnen Vorgang. Ich habe aber keinen Vergleich zu anderen Frameworks, vielleicht ist da die Handhabe etwas einfacher dun trotzdem so flexibel wie bei YUI, bzw. wie du es benötigst.