HTML, CSS und jQuery: Ein technischer Leitfaden zur Implementierung der Drag-and-Drop-Sortierung-js-Tutorial-php.cn

HTML, CSS und jQuery: Ein technischer Leitfaden zur Implementierung der Drag-and-Drop-Sortierung

PHPz

Freigeben： 2023-10-24 08:12:26

Original

783 Leute haben es durchsucht

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

现在，我们已经准备好了一切必要的代码、库和插件，我们可以开始实现拖拽排序了。

首先，我们需要使用jQuery UI的sortable()方法来使列表可拖拽排序。在JavaScript代码中插入以下代码：

$(document).ready(function() {
  $("#sortable").sortable();
});

Nach dem Login kopieren

接下来，我们需要为排序完成后的事件添加一个回调函数，以便能够在列表排序变化时获取更新后的排序结果。修改JavaScript代码如下：

$(document).ready(function() {
  $("#sortable").sortable({
    update: function(event, ui) {
      var sortedIDs = $(this).sortable("toArray");
      console.log(sortedIDs);
    }
  });
});

Nach dem Login kopieren

在这段代码中，我们使用jQuery UI的toArray()方法获取排序后的列表项的ID，并将其打印到控制台上。您可以根据实际需求对排序结果进行进一步的处理，比如将排序结果进行保存或者更新界面的显示。

最后，为了增加交互性，我们可以在排序时添加一些动画效果。修改JavaScript代码如下：

$(document).ready(function() {
  $("#sortable").sortable({
    update: function(event, ui) {
      var sortedIDs = $(this).sortable("toArray");
      console.log(sortedIDs);
    }
  }).disableSelection();
});

Nach dem Login kopieren

在这段代码中，我们使用了jQuery UI的disableSelection()方法来禁止列表项的文本被选中。

至此，我们已经完成了一个简单的拖拽排序功能的实现。您可以根据自己的需求来进行样式调整和功能扩展，比如添加删除、编辑等功能。

总结：
本文提供了一个使用HTML、CSS和jQuery来实现拖拽排序的实例。通过使用jQuery UI的sortable()rrreee

Da wir nun den gesamten erforderlichen Code, die Bibliotheken und Plug-Ins vorbereitet haben, können wir mit der Implementierung von Drag & Drop beginnen Sortierung.

Zuerst müssen wir die Methode 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!