2010-12-01 11 views
2

Ich habe zwei sortierbare Listen, die verbunden sind. Einer ist einfach auf der Seite, der andere ist in einem Akkordeon. (Ich verwende das Akkordeon als Behälter für die andere Liste)jQuery UI: Ziehen Sie innerhalb von Akkordeon nach außen sortierbar

Mein Ziel ist es, dass ein Benutzer das Akkordeon öffnen und Elemente aus dieser Liste auf die Seite ziehen kann.

Es funktioniert - außer der Platzhalter verschwindet beim Verlassen des Akkordeons. Ich habe versucht Helfer: "klonen" und erhöhen Sie den zIndex.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 

    $(document).ready(function(){ 
     $("#inside").accordion({ 
       collapsible: true, 
       fillSpace: true, 
       active: false 
      }); 
     $("#ulOutsideList, #ulInsideList").sortable({ 
       opacity: 0.7, 
       revert: 100, 
       scroll: true, 
       helper: 'clone', 
       zIndex: 50000, 
       connectWith: ".connectedSortable",     
      }); 
    }); 
</script> 


    <div id="outside"> <!-- 1. Pick a Store --> 
     <ul id="ulOutsideList" class="connectedSortable"> 
     <li>outside 1</li> 
     <li>outside 2</li> 
     <li>outside 3</li> 
     </ul> 
    </div> <!-- end 1. Pick a Store --> 

    <div style="clear:both"></div> 

    <div id="inside"> 
     <h3>container</h3> 
     <ul id="ulInsideList" class="connectedSortable"> 
      <li>inside 1</li> 
      <li>inside 2</li> 
      <li>inside 3</li> 
     </ul> 
    </div> 

+0

Sie möchten also Elemente aus dem Akkordeon ziehen und leere Platzhalter an ihren Plätzen lassen? –

Antwort

2

In Ihrem sortierbar Anruf Sie die folgenden Optionen verwenden möchten:

Helfer: "klonen", appendTo:

Hier ist eine vereinfachte Version des Codes ist „Körper ", // oder was auch immer das Element sein soll, an das der Helfer geklont werden soll

Das macht zwei Dinge. Zuerst erstellt es eine Kopie des Elements, das gezogen wird (Hilfsoption), und zweitens fügt es diesen Helfer an das angegebene Element an (Option appendTo).

ähnliche Fragen hier: jQuery-Ui: Cannot drag object outside of an accordion und hier: jquery sortable cannot be dragged outside of accordion

+0

Danke, genau das habe ich gebraucht. –

0

Edvn Antwort für mich gearbeitet, aber hatte die unangenehme Nebenwirkung einen style = verlassen: auf jedes Element „Anzeigeblock“ nach erfolgter Sortierung, die brach die Layout habe ich versucht zu machen.

Eine alternative Lösung besteht darin, den Überlauf zu überschreiben: Auto-Stil auf .ui-Akkordeon und .ui-Akkordeon-Inhalt auf Überlauf: erben. Dies verhindert, dass die Sortierung beim Ziehen ausgeblendet wird. In meinem Fall hatte das keine Probleme mit dem Akkordeon, aber vermutlich ist das Styling aus einem bestimmten Grund, so YMMV. FWIW habe ich auf Chrome und Firefox getestet.

Update: Es gibt einen Kompromiss bei der Verwendung dieser Methode auch. Die Änderung des Überlaufstylings kann dazu führen, dass der Inhalt eines unteren Akkordeonsegments unterhalb des Akkordeonobjekts erscheint, wenn das Segment erweitert wird und das obere Segment während der Animationssequenz immer noch geschlossen wird. Sie können die Auswirkungen minimieren, indem Sie nur oerflow festlegen: erben Sie auf .ui-Akkordeon und die .ui-Accordion-Content-Instanzen, die Sie sortieren müssen.

Verwandte Themen