Hallo,
ich sitze gerade an einem Drag und Drop-menü für meine Plattform. Problem ist, dass das Menü folgendermaßen aufgebaut ist:
Die Menübuttons werden in einer Schleife ausgegeben. Es werden 5 Menübuttons dargestellt, danach wird ein <ul> davor gesetzt, also
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:
Alles anzeigen
Ich hoffe, es kann mir jemand helfen.
ich sitze gerade an einem Drag und Drop-menü für meine Plattform. Problem ist, dass das Menü folgendermaßen aufgebaut ist:
Die Menübuttons werden in einer Schleife ausgegeben. Es werden 5 Menübuttons dargestellt, danach wird ein <ul> davor gesetzt, also
Quellcode
- <ul id="menue">
- <li id="recordsArray_ID"><a href="LINK}" class="menuehandle">NAME</a></li>
- <li id="recordsArray_ID"><a href="LINK}" class="menuehandle">NAME</a></li>
- <li id="recordsArray_ID"><a href="LINK}" class="menuehandle">NAME</a></li>
- <li id="recordsArray_ID"><a href="LINK}" class="menuehandle">NAME</a></li>
- <li id="recordsArray_ID"><a href="LINK}" class="menuehandle">NAME</a></li>
- <ul>
- <li id="recordsArray_ID"><a href="LINK}" class="menuehandle">NAME</a></li>
- ...
- </ul>
- <li id="menumorehandle"><a href="#" onClick="showMenuAll(); return false">more >></a></li>
- </ul>
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
- <script type="text/javascript">
- $(document).ready(function(){
- $(function() {
- $("#menue, #menue ul").sortable({
- opacity: 0.7,
- delay: 200,
- handle: '.menuehandle',
- update: function() {
- var order = $(this).sortable("serialize") + '&action=updateRecordsListings&userID={$this->user->userID}';
- $.post("schnittstelle/updateDB.php", order, function(theResponse){ });
- }
- });
- });
- });
- function showMenuAll() {
- $("#menumorehandle").html('<a href="#" onClick="showMenuNo(); return false"><< more</a>');
- $("#menuvd").fadeIn("slow");
- };
- function showMenuNo() {
- $("#menumorehandle").html('<a href="#" onClick="showMenuAll(); return false">more >></a>');
- $("#menuvd").fadeOut("slow");
- };
- </script>
Ich hoffe, es kann mir jemand helfen.