Web-Frontend
js-Tutorial
HTML, CSS und jQuery: Ein technischer Leitfaden zur Implementierung der Drag-and-Drop-Sortierung
HTML, CSS und jQuery: Ein technischer Leitfaden zur Implementierung der Drag-and-Drop-Sortierung
HTML, CSS und jQuery: Technischer Leitfaden zur Implementierung der Drag-and-Drop-Sortierung
Im modernen Webdesign ist Drag-and-Drop-Sortierung eine sehr häufige Funktion. Es ermöglicht Benutzern das Sortieren durch Ziehen von Elementen und bietet eine gute Benutzererfahrung bei Echtzeitaktualisierungen. In diesem Artikel erfahren Sie, wie Sie mithilfe von HTML, CSS und jQuery eine einfache Drag-and-Drop-Sortierfunktion implementieren.
Bevor wir beginnen, müssen wir zunächst einige grundlegende HTML-Strukturen und CSS-Stile vorbereiten, die eine Grundlage für unsere anschließende Drag-and-Drop-Sortierung bilden.
HTML-Struktur:
<ul id="sortable"> <li>项目 1</li> <li>项目 2</li> <li>项目 3</li> <li>项目 4</li> <li>项目 5</li> </ul>
CSS-Stil:
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
}
#sortable li {
cursor: move;
padding: 10px;
margin-bottom: 5px;
background-color: #f5f5f5;
border: 1px solid #ccc;
}Als nächstes müssen wir die jQuery-Bibliothek und einige jQuery-UI-Plug-Ins vorstellen, die uns die notwendige Unterstützung für die Implementierung der Drag-and-Drop-Sortierung bieten. Fügen Sie den folgenden Code in das <head>-Tag der Webseite ein: <head>标签中插入以下代码：
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
现在，我们已经准备好了一切必要的代码、库和插件，我们可以开始实现拖拽排序了。
首先，我们需要使用jQuery UI的sortable()方法来使列表可拖拽排序。在JavaScript代码中插入以下代码：
$(document).ready(function() {
$("#sortable").sortable();
});接下来，我们需要为排序完成后的事件添加一个回调函数，以便能够在列表排序变化时获取更新后的排序结果。修改JavaScript代码如下：
$(document).ready(function() {
$("#sortable").sortable({
update: function(event, ui) {
var sortedIDs = $(this).sortable("toArray");
console.log(sortedIDs);
}
});
});在这段代码中，我们使用jQuery UI的toArray()方法获取排序后的列表项的ID，并将其打印到控制台上。您可以根据实际需求对排序结果进行进一步的处理，比如将排序结果进行保存或者更新界面的显示。
最后，为了增加交互性，我们可以在排序时添加一些动画效果。修改JavaScript代码如下：
$(document).ready(function() {
$("#sortable").sortable({
update: function(event, ui) {
var sortedIDs = $(this).sortable("toArray");
console.log(sortedIDs);
}
}).disableSelection();
});在这段代码中，我们使用了jQuery UI的disableSelection()方法来禁止列表项的文本被选中。
至此，我们已经完成了一个简单的拖拽排序功能的实现。您可以根据自己的需求来进行样式调整和功能扩展，比如添加删除、编辑等功能。
总结：
本文提供了一个使用HTML、CSS和jQuery来实现拖拽排序的实例。通过使用jQuery UI的sortable()rrreee
sortable() der jQuery-Benutzeroberfläche verwenden, um die Liste ziehbar und sortierbar zu machen. Fügen Sie den folgenden Code in den JavaScript-Code ein: 🎜rrreee🎜 Als nächstes müssen wir eine Rückruffunktion für das Ereignis hinzufügen, nachdem die Sortierung abgeschlossen ist, damit wir die aktualisierten Sortierergebnisse erhalten können, wenn sich die Listensortierung ändert. Ändern Sie den JavaScript-Code wie folgt: 🎜rrreee🎜In diesem Code verwenden wir die Methode toArray() der jQuery-Benutzeroberfläche, um die ID des sortierten Listenelements abzurufen und sie auf der Konsole auszugeben. Sie können die Sortierergebnisse entsprechend den tatsächlichen Anforderungen weiterverarbeiten, z. B. indem Sie die Sortierergebnisse speichern oder die Anzeige der Benutzeroberfläche aktualisieren. 🎜🎜Um die Interaktivität zu erhöhen, können wir beim Sortieren schließlich einige Animationseffekte hinzufügen. Ändern Sie den JavaScript-Code wie folgt: 🎜rrreee🎜In diesem Code verwenden wir die Methode disableSelection() der jQuery-Benutzeroberfläche, um zu verhindern, dass der Text des Listenelements ausgewählt wird. 🎜🎜Zu diesem Zeitpunkt haben wir die Implementierung einer einfachen Drag-and-Drop-Sortierfunktion abgeschlossen. Sie können den Stil anpassen und Funktionen entsprechend Ihren Anforderungen erweitern, z. B. durch das Hinzufügen von Lösch-, Bearbeitungs- und anderen Funktionen. 🎜🎜Zusammenfassung:Dieser Artikel enthält ein Beispiel für die Verwendung von HTML, CSS und jQuery zur Implementierung der Drag-and-Drop-Sortierung. Durch die Verwendung der Methode
sortable() der jQuery-Benutzeroberfläche können wir die Sortierung der Liste einfach per Drag-and-Drop implementieren und nach Abschluss der Sortierung problemlos die sortierten Ergebnisse erhalten. Ich hoffe, dass dieser Artikel Ihnen hilft, den Implementierungsprozess der Drag-and-Drop-Sortierung zu verstehen. 🎜🎜Codebeispiel: https://codepen.io/pen/?template=WNRZebr🎜Das obige ist der detaillierte Inhalt vonHTML, CSS und jQuery: Ein technischer Leitfaden zur Implementierung der Drag-and-Drop-Sortierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1386
52
So verwenden Sie Bootstrap in Vue
Apr 07, 2025 pm 11:33 PM
Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
So schreiben Sie geteilte Zeilen auf Bootstrap
Apr 07, 2025 pm 03:12 PM
Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch
Apr 12, 2025 am 12:02 AM
WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
