Heim > Artikel > Web-Frontend > HTML, CSS und jQuery: Tipps zum Sortieren von Bildern per Drag-and-Drop

HTML, CSS und jQuery: Tipps zum Sortieren von Bildern per Drag-and-Drop

WBOYOriginal: 2023-10-25 09:03:291137Durchsuche

HTML, CSS und jQuery: Tipps zur Implementierung der Drag-and-Drop-Sortierung von Bildern

Im modernen Webdesign ist die Drag-and-Drop-Sortierung von Bildern zu einer gängigen und beliebten Funktion geworden. Durch Ziehen von Bildern können Benutzer die Reihenfolge der Bilder frei anpassen und so das Benutzererlebnis und die Interaktivität verbessern. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML, CSS und jQuery die Drag-and-Drop-Sortierung von Bildern implementieren, und es werden spezifische Codebeispiele bereitgestellt.

1. HTML-Struktur

Erstellen Sie zunächst eine HTML-Datei und legen Sie die grundlegende Seitenstruktur fest. Wir verwenden eine ungeordnete Liste (

) dargestellt und enthält ein Bild-Tag ():
```
<!DOCTYPE html>
<html>
<head>
    <title>图像拖拽排序</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <ul id="sortable">
        <li><img  src="image1.jpg" alt="HTML, CSS und jQuery: Tipps zum Sortieren von Bildern per Drag-and-Drop" ></li>
        <li><img  src="image2.jpg" alt="HTML, CSS und jQuery: Tipps zum Sortieren von Bildern per Drag-and-Drop" ></li>
        <li><img  src="image3.jpg" alt="HTML, CSS und jQuery: Tipps zum Sortieren von Bildern per Drag-and-Drop" ></li>
        <li><img  src="image4.jpg" alt="HTML, CSS und jQuery: Tipps zum Sortieren von Bildern per Drag-and-Drop" ></li>
        <li><img  src="image5.jpg" alt="HTML, CSS und jQuery: Tipps zum Sortieren von Bildern per Drag-and-Drop" ></li>
    </ul>

    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
```
2. CSS-Stil

Um den Drag-and-Drop-Sortiereffekt zu erzielen, benötigen wir um CSS zum Festlegen des Bildstils zu verwenden. Fügen Sie in der Datei style.css den folgenden Stilcode hinzu:
```
#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#sortable li {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 10px;
    border: 1px solid #ccc;
}

#sortable img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
```
3. Drag-and-Drop-Sortierfunktion von jQuery

Um die Drag-and-Drop-Sortierfunktion zu implementieren, verwenden wir die von der jQuery-UI-Bibliothek bereitgestellte Sortiermethode. Fügen Sie in der Datei script.js den folgenden Code hinzu:
```
$(function() {
    $("#sortable").sortable();
});
```
4. Vollständiger Effekt

Durch die oben genannten Schritte haben wir die grundlegende Implementierung der Drag-and-Drop-Sortierung von Bildern abgeschlossen. Öffnen Sie Ihren Browser, führen Sie die HTML-Datei aus und Sie sehen eine Liste mit Bildern. Sie können versuchen, mit der Maus auf die Bilder zu klicken und sie zu ziehen, um sie zu sortieren.

Es ist zu beachten, dass Sie zum Implementieren der Drag-and-Drop-Sortierfunktion jQuery- und jQuery-UI-Bibliotheken in das Projekt einführen und sicherstellen müssen, dass ihre Dateipfade korrekt festgelegt sind.

Zusammenfassung

Durch die Verwendung von HTML, CSS und jQuery können wir die Drag-and-Drop-Sortierfunktion von Bildern einfach implementieren. Der obige Beispielcode bietet ein Grundgerüst, das Sie entsprechend den tatsächlichen Anforderungen ändern und erweitern können. Ich hoffe, dass dieser Artikel Ihnen hilft, die Sortiertechniken per Drag-and-Drop für Bilder zu verstehen, und wünsche Ihnen viel Erfolg beim Webdesign!

Referenzquelle:
- Offizielle Dokumentation der jQuery-Benutzeroberfläche: https://jqueryui.com/sortable/
- CSS-Objektanpassungsfähigkeit: https://developer.mozilla.org/zh-CN/docs/Web/CSS/ Objekt -fit

Das obige ist der detaillierte Inhalt vonHTML, CSS und jQuery: Tipps zum Sortieren von Bildern per Drag-and-Drop. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery css html Object JS 对象 ul li https ui

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML, CSS und jQuery: Erstellen Sie eine schöne BilderwandNächster Artikel：HTML, CSS und jQuery: Erstellen Sie eine schöne Bilderwand

In Verbindung stehende Artikel

Mehr sehen