Wie man ein Div dementsprechende und sortierbar zu machen

Benutzer von Web-Anwendungen haben wahrscheinlich dementsprechende und sortierbare Listen oft ohne es zu merken gesehen. Einem bemerkenswerten Ort, wo sie erscheinen, wird im Fenster "Widgets" in WordPress, wo Benutzer Widgets in Seitenleisten ziehen und dann erneut bestellen können. JQuery UI oder Benutzeroberfläche ist eine Erweiterung von jQuery, die diese Fähigkeit Websites hinzufügt. Nach der Installation von jQuery und jQuery UI mithilfe der vorgefertigten "sortable()"-Funktion zwei Felder sortierbar zu machen und sie verbinden.

Anweisungen

1 Öffnen einer Webseite in Notepad oder einem Codeeditor und fügen diese "< >" Skripttags oberhalb des schließenden "< / Head >" Tags:

< Script-Tags Hinzufügen von externen JavaScript-Dateien, die auf Googles Servern gehostet. Sie brauchen diesen Code, um die jQuery-Bibliothek und die jQuery UI-Erweiterung, die in Ihrer Web-Seite eingebettet.

2 Gehen Sie zu den "< Body >"-Tags der Webseite, und fügen Sie zwei Divs mit so vielen verschachtelten Divs wie Sie benötigen:

< Div Id = "sortme1" Class = "Verbindung" >

< Div > Eintrag 1 < / Div >

< Div > Punkt 2 < / Div >

< Div > Punkt 3 < / Div >

< Div > Punkt 4 < / Div >

< / Div >

< Div Id = "sortme2" Class = "Verbindung" >

< / Div >

Das zweite Div ist leer, da das Feld ist, wo Sie Gegenstände und sortieren.

3 Fügen Sie einige Stile zwischen "< Stil >" Tags im Head des HTML-Codes:

sortme1, sortme2 {} Float: left;

}

sortme1 Div sortme2 Div {} Breite: 100px;

Höhe: 20px;

Padding: 10px;

Margin: 10px;

Hintergrund: #555;

Farbe: #fff;

List-Style: none;

}

{sortme2} Width: 200px;

Höhe: 300px;

Padding: 10px;

Margin: 10px;

Hintergrund: #eee;

}

Diese Stile zu positionieren und Farbe ziehbare Listenelemente und dementsprechende Feld.

4 Starten Sie Ihr Skript mit einer Funktion, die überprüft, wenn die Seite in den Browser geladen abgeschlossen ist:

< Skript-Typ = "Text/Javascript" >

{$(function()}

});

< / script >

Schreiben Sie den Rest Ihres Skripts zwischen den geschweiften Klammern im obigen Beispiel gezeigt.

5 Wählen Sie beide ungeordneten Listen und und fügen Sie die Funktion "sortable()". Fügen Sie "Datenübertragung: '.connected'" in "sortable()" für die Verbindung die beiden Listen. Die Funktion mit "disableSelection()" zu beenden, so dass Benutzer nicht von Text in der Elemente, die manchmal es schwieriger hervorheben können macht, klicken und ziehen sie:

$(#sortme1, #sortme2) .sortable({

Datenübertragung: '.connectedSortable'

.disableSelection()});