Drag und Drop-Menü

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

  • Drag und Drop-Menü

    Hallo,

    ich sitze gerade an einem Drag und Drop-menü für meine Plattform. Problem ist, dass das Menü folgendermaßen aufgebaut ist:

    Quellcode

    1. <ul id="menue">
    2. --SCHLEIFE--
    3. <li id="recordsArray_ID"><a href="LINK}" class="menuehandle">NAME</a></li>
    4. --SCHLEIFE--
    5. <li id="menumorehandle"><a href="#" onClick="showMenuAll(); return false">more >></a></li>
    6. </ul>


    Die Menübuttons werden in einer Schleife ausgegeben. Es werden 5 Menübuttons dargestellt, danach wird ein <ul> davor gesetzt, also

    Quellcode

    1. <ul id="menue">
    2. <li id="recordsArray_ID"><a href="LINK}" class="menuehandle">NAME</a></li>
    3. <li id="recordsArray_ID"><a href="LINK}" class="menuehandle">NAME</a></li>
    4. <li id="recordsArray_ID"><a href="LINK}" class="menuehandle">NAME</a></li>
    5. <li id="recordsArray_ID"><a href="LINK}" class="menuehandle">NAME</a></li>
    6. <li id="recordsArray_ID"><a href="LINK}" class="menuehandle">NAME</a></li>
    7. <ul>
    8. <li id="recordsArray_ID"><a href="LINK}" class="menuehandle">NAME</a></li>
    9. ...
    10. </ul>
    11. <li id="menumorehandle"><a href="#" onClick="showMenuAll(); return false">more >></a></li>
    12. </ul>
    Alles anzeigen


    Das <ul> blendet die restliche aus. Problem ist nun, dass ich die Items, in dem <ul> nicht normal "draggen" kann. Ich kann die ausgeblendeten Items nur unter sich tauschen, aber nicht mit einem angezeigten tauschen.

    Der JS-Code:

    Quellcode

    1. <script type="text/javascript">
    2. $(document).ready(function(){
    3. $(function() {
    4. $("#menue, #menue ul").sortable({
    5. opacity: 0.7,
    6. delay: 200,
    7. handle: '.menuehandle',
    8. update: function() {
    9. var order = $(this).sortable("serialize") + '&action=updateRecordsListings&userID={$this->user->userID}';
    10. $.post("schnittstelle/updateDB.php", order, function(theResponse){ });
    11. }
    12. });
    13. });
    14. });
    15. function showMenuAll() {
    16. $("#menumorehandle").html('<a href="#" onClick="showMenuNo(); return false"><< more</a>');
    17. $("#menuvd").fadeIn("slow");
    18. };
    19. function showMenuNo() {
    20. $("#menumorehandle").html('<a href="#" onClick="showMenuAll(); return false">more >></a>');
    21. $("#menuvd").fadeOut("slow");
    22. };
    23. </script>
    Alles anzeigen



    Ich hoffe, es kann mir jemand helfen.

  • Hi,
    sieht der Code wirklich so aus, oder hast du das beim kopieren vermischt?

    Quellcode

    1. <ul id="menue">
    2. <li id="recordsArray_ID"><a href="LINK}" class="menuehandle">NAME</a></li>
    3. <ul>
    4. <li id="recordsArray_ID"><a href="LINK}" class="menuehandle">NAME</a></li>
    5. ...
    6. </ul>
    7. <li id="menumorehandle"><a href="#" onClick="showMenuAll(); return false">more >></a></li>
    8. </ul>


    Denn das ist kein gültiger HTML Code - kann folglich weder korrekt dargestellt, noch irgendwie vertauscht werden.
    <ul> dürfen kein Kind von <ul> sein. Check deinen Code am besten mal mit dem W3 Validator.

  • Gnex schrieb:

    Ich kann die ausgeblendeten Items nur unter sich tauschen, aber nicht mit einem angezeigten tauschen.

    Ich verstehe dein Anliegen auch ehrlich gesagt auch nicht. Ausgeblendet, Angezeigt? Wie willst du versteckte Elemente sortieren?
    Bitte erkläre es nochmal.

    Und schau dir mal die Samples an: jqueryui.com/demos/sortable/#portlets
    Was kommt deinem Beispiel am nähsten? Was fehlt?

  • Hallo,

    eigentlich dachte ich mir das ganze ungefähr so: jqueryui.com/demos/sortable/#connect-lists.

    Nun habe ich mir das ganze überlegt und möchte es doch anders machen, nämlich so: jqueryui.com/demos/droppable/#photo-manager.

    Der User hat alle Items in einer Liste und zieht sich diese dann in seine Menüleiste. Zieht er mehr als 5 Items in seine Menüleiste, so rutschen die schon vorhandenen Items in eine zweite, dritte, ... Reihe. Die zweite, dritte, ... Reihe wird aber nur angezeigt, wenn er die Liste mit allen Items offen hat. In der Luste, mit allen Items werden die Items ausgegraut und nicht-dropbar gemacht, die er bereits in seiner Menüleiste hat. Zieht der User ein Item aus seiner Menüleiste in die Gesamt-Item-Liste, so soll das Item aus seiner Menüleiste verschwinden und in der Gesamtliste wieder als dropbar angezeigt werden. Die Items in der Menüleiste sollen sich per Drag an den Plätzen verschieben lassen.

  • So, nun funktioniert schonmal das Verschieben:

    Quellcode

    1. <style type="text/css">
    2. .menudisable,
    3. .menudisable a {
    4. color: #eee;
    5. }
    6. </style>
    8. <script type="text/javascript">
    9. $(function() {
    10. $("#menue").sortable({
    11. revert: true
    12. });
    13. $("#gallery li").draggable({
    14. connectToSortable: '#menue',
    15. helper: 'clone',
    16. stop: function(ev, ui) {
    17. ui.disableSelection();
    18. }
    19. });
    20. $("ul, li").disableSelection();
    21. });
    22. </script>
    24. <ul id="menue">
    25. <li id="listItem_1"><a href="#">xxx</a></li>
    26. <li id="listItem_1"><a href="#">xxx</a></li>
    27. <li id="listItem_1"><a href="#">xxx</a></li>
    28. </ul>
    30. <div style="z-index: 5; position: absolute; margin-left: 600px; margin-top: 100px; background: #000; color: #fff">
    31. <ul id="gallery">
    32. <li id="listItem_1"><a href="#">xxx000</a></li>
    33. <li id="listItem_1"><a href="#">xxx000</a></li>
    34. <li id="listItem_1" class="menudisable"><a href="#">xxx000</a></li>
    35. </ul>
    36. </div>
    Alles anzeigen


    Verschieben von "gallery" in "menue" möglich, sortieren im "menu" möglich.

    Wie kann ich auch das zurück verschieben von "menue" in "gallery" einbauen? Wie übergebe ich das Verschieben an ein PHP-Script? Beim Sortieren weiß ich es.

  • Nimm doch die Gallerie als Vorlage.
    Beides Container sind droppable:

    Quellcode

    1. // there's the gallery and the trash
    2. // let the gallery items be draggable
    3. // let the trash be droppable, accepting the gallery items
    4. // let the gallery be droppable as well, accepting items from the trash


    Zum Serialisieren von droppables habe ich spontan auch nix gefunden. Aber ich bin sicher Google weiß die Antwort.
    Bestimmt ein $gallery.serialize() was du beim drop event feuern musst.

  • Hallo,

    leider ist das Galeriescript, nach ausproberen, nicht geeignet. Problem ist, dass sich die Links nicht sortieren lassen, es lassen sich Menülinks verschieben, die durch Drag 'n Drop in diese verschoben wurden, ...

    Deswegen benötige ich Hilfe für das obrige Script.


    Gruß

  • Hi,

    bevor ich das jetzt mit den Updates anfange, soll das Script ersteinmal richtig funktioniren. Das Problem bei dem Galeriescript ist, dass irgendwelche Styleeinstellungen hinzugefügt werden. Ich habe das ganze mal getestet, dort war dann der verschobene "Balken" 20px eingerückt.


    Dann müsste man sich überlegen, wie man das aufbaut:
    Eine DB mit allen Menülinks und eine, in der die Items dem User zugeordnet werden?

  • Galleriescript? Aber ich dachte du hast dich davon verabschiedet, weil du sortables brauchst?

    Gnex schrieb:

    eigentlich dachte ich mir das ganze ungefähr so: jqueryui.com/demos/sortable/#connect-lists.


    Von der Herangehensweise:
    Ich würde erstmal das Projektkritische machen. Bekommst du den JavaScript Code hin?
    Ja? Dann kannst du dich anschließend daran machen das ganze von/in eine Datenbank zu serialisieren.

  • Ich hatte mich von jqueryui.com/demos/sortable/#connect-lists verabschiedet.

    So ganz bekomme ich den JavaScript-Code nicht hin:

    Quellcode

    1. <script type="text/javascript">
    2. $(function() {
    3. // there's the gallery and the trash
    4. var $gallery = $('#gallery'), $menue = $('#menue');
    6. // let the gallery items be draggable
    7. $('li',$gallery).draggable({
    8. revert: 'invalid', // when not dropped, the item will revert back to its initial position
    9. containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
    10. helper: 'clone',
    11. cursor: 'move'
    12. });
    14. // let the trash be droppable, accepting the gallery items
    15. $menue.droppable({
    16. accept: '#gallery > li',
    17. drop: function(ev, ui) {
    18. deleteImage(ui.draggable);
    19. }
    20. });
    22. // let the gallery be droppable as well, accepting items from the trash
    23. $gallery.droppable({
    24. accept: '#menue li',
    25. drop: function(ev, ui) {
    26. recycleImage(ui.draggable);
    27. }
    28. });
    30. // image deletion function
    31. var recycle_icon = '';
    32. function deleteImage($item) {
    33. $item.fadeOut(function() {
    34. var $list = $('ul',$menue).length ? $('ul',$menue) : $('<ul />').appendTo($menue);
    36. $item.find('a.ui-icon-trash').remove();
    37. $item.append(recycle_icon).appendTo($list).fadeIn(function() {
    38. $item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
    39. });
    40. });
    41. }
    43. // image recycle function
    44. var trash_icon = '';
    45. function recycleImage($item) {
    46. $item.fadeOut(function() {
    47. $item.find('a.ui-icon-refresh').remove();
    48. $item.css('width','96px').append(trash_icon).find('img').css('height','72px').end().appendTo($gallery).fadeIn();
    49. });
    50. }
    52. // image preview function, demonstrating the ui.dialog used as a modal window
    53. function viewLargerImage($link) {
    54. var src = $link.attr('href');
    55. var title = $link.siblings('img').attr('alt');
    56. var $modal = $('img[src$="'+src+'"]');
    58. if ($modal.length) {
    59. $modal.dialog('open')
    60. } else {
    61. var img = $('<img alt="'+title+'" width="384" height="288" style="display:none;padding: 8px;" />')
    62. .attr('src',src).appendTo('body');
    63. setTimeout(function() {
    64. img.dialog({
    65. title: title,
    66. width: 400,
    67. modal: true
    68. });
    69. }, 1);
    70. }
    71. }
    73. // resolve the icons behavior with event delegation
    74. $('ul.gallery > li').click(function(ev) {
    75. var $item = $(this);
    76. var $target = $(ev.target);
    78. if ($target.is('a.ui-icon-trash')) {
    79. deleteImage($item);
    80. } else if ($target.is('a.ui-icon-zoomin')) {
    81. viewLargerImage($target);
    82. } else if ($target.is('a.ui-icon-refresh')) {
    83. recycleImage($item);
    84. }
    86. return false;
    87. });
    88. });
    89. </script>
    Alles anzeigen

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

  • Gnex schrieb:

    So ganz bekomme ich den JavaScript-Code nicht hin:

    was klappt denn nicht? Bis auf die Benennung von trash und menu hast du den Quelltext doch 1 zu 1 vom funktionierenden Beispiel übernommen, oder?
    Stell ne konkrete Frage oder erläutere uns was deinen Code vom funktionierenden Beispiel unterscheidet und warum.
    Ich hab eher das Gefühl dir fehlt vielleicht was. Du solltest du dir den Code in einem neuen Fenster öffnen und dann abspeichern: jqueryui.com/demos/droppable/photo-manager.html

  • Hi,

    so, nun funktioniert das Verschieben schonmal. Problem ist aber, dass das Verschieben untereinander nicht funktioniert. Heißt: Das verschieben in den bereich von "#menue" und im Bereich von "#gallery".
    Außerdem lassen sich bereits bestehende Items in "#menue" nicht in "#gallery" verschieben.

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