boxen, drag'n'drop, resize

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • boxen, drag'n'drop, resize

    Hi,

    ich suche für ein Projekt eine Möglichkeit Boxen/Gadgets/Portlets/... zu integrieren.
    Dazu hab ich diesen Post gelesen: easy-coding.de/ajax-drag-und-drop-igoogle-t4977.html
    Allerdings findet dort die Verschiebung nur in Spalten statt. Ich möchte 3-5 Boxen anbieten, bei denen man die Größe ändern kann, sie hinzufügen, löschen, (beliebig) umherschieben kann und irgendwann die Position(en) mal in der Datenbank abspeichern kann. Alle Boxen sollten in einem Rahmen verschiebbar sein.

    Meine Frage ist eigentlich nur, ob jemand eine Bibliothek oder sonstiges kennt, welche dies ermöglicht.

    Danke im Voraus,

    bye

  • Hi,

    ja genau, ich meine in einem freien aber festgelegten Raum, also z.B. in einem div von fester Breite und Höhe.
    Also werd ich mir ein JS-Framework hernehmen (müssen) und diese Funktionalitäten selbst implementieren müssen.

    Naja mal schauen, ob und wie ich das hinbekomme :huh:

    Falls dennoch jemand eine schon vorhandene Implementierung kennt, immer her damit 8o

    bye

    EDIT:

    Ich habe mittlerweile eine Möglichkeit gefunden, wie man "draggable and resizable" hinbekommt. Zumindest theoretisch. Praktisch läuft es bei mir nicht, auf der Seite vom Autor läufts, bei mir komischerweise nicht.
    Das Script ist ein PlugIn für jquery: dev.iceburg.net/jquery/jqDnR/
    Ich bekomme im Firebug folgenden Fehler:

    Quellcode

    1. $("#ex3").jqDrag is not a function
    2. (no name)()index.html (line 30)
    3. to the wait list jQuery.readyList.push()jquery.js (line 2274)
    4. (no name)()jquery.js (line 2294)
    5. each([function()], function(), undefined)jquery.js (line 751)
    6. ready()jquery.js (line 2293)
    7. [Break on this error] $('#ex3').jqDrag('.jqDrag');


    Habe alles so implementiert wie auf der Seite beschrieben.
    html:

    Quellcode

    1. ...
    2. <script type="text/javascript">
    3. $().ready(function() {
    4. $('#ex3').jqDrag('.jqDrag').jqResize('.jqResize');
    5. });
    6. </script>
    7. <div id="ex3" class="jqDnR">
    8. <div class="jqHandle jqDrag"></div>
    9. <br />
    10. I am an example Box "#ex3"<br />
    11. Using the Handles, you can *RESIZE*
    12. and *DRAG* me.
    13. <div class="jqHandle jqResize"></div>
    14. </div>
    15. ...
    Alles anzeigen

    Ich benutze die aktuelle Version von jquery (1.2.3), habe aber auch die in dem Beispiel verwendete Version probiert. Ohne Erfolg.

    Ich frage mich nun warum diese Fehlermeldung zustande kommt. Wenn ich dieses Problem lösen könnte, bräuchte ich nur noch das Verschieben in einem festgelegten Raum lösen.

    Vielleicht könnt ihr mir helfen :S

    Bye

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von mad ()

  • Sorry für Doppelpost!

    Soeben hab ich den Beitrag über ui.jquery gesehen. Das scheint mein Problem zu lösen. Ich probier das mal und gebe dann Feedback!

    Grüße,
    mad

    UPDATE:

    Ich habe es jetzt hinbekommen. Draggable & Resizable Boxes sozusagen.
    Es ist mit ui.jquery recht einfach.

    Codeschnipsel:

    Quellcode

    1. $(document).ready(function(){
    2. $(".dNr").resizable({ autohide: true,
    3. handles: 'all',
    4. proxy: 'proxy' });
    5. $(".dNr").draggable({ containment: 'parent',
    6. revert: false,
    7. stop: function(e, ui) {
    8. //handle saving of data in a cookie here with ajax
    9. /*
    10. //necessary data:
    11. alert("links: "+ui.position.left+", oben: "+ui.position.top+
    12. ", width: "+$(this).width()+", height: "+$(this).height() );
    13. */
    14. }
    15. });
    16. });
    Alles anzeigen


    Was ich jetzt noch machen muss ist die Position nach dem draggen in einem Cookie speichern und beim nächsten Besuch der Seite wieder auszulesen. Das wird lustig =)
    Wenn ich damit fertig bin, kann ich ja ein kurzes HowTo im Wiki posten...

    bye

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von mad ()