So implementieren Sie mit Layui eine ziehbare Sortierfunktion für Seitenelemente

So implementieren Sie mit Layui die Sortierfunktion für ziehbare Seitenelemente

Vorwort:
In der Webentwicklung ist die Sortierfunktion von Seitenelementen eine häufige Anforderung. Mit Layui als Front-End-Framework können Sie die Sortierung von Seitenelementen per Drag-and-Drop problemlos implementieren. In diesem Artikel wird erläutert, wie Sie Layui zum Implementieren dieser Funktion verwenden, und es werden spezifische Codebeispiele bereitgestellt.

1. Projektvorbereitung

1. Laden Sie Layui herunter und konfigurieren Sie es im Projekt. Layui-Download-Adresse: https://www.layui.com/
2. Erstellen Sie eine HTML-Datei und führen Sie Layui-bezogene Dateien ein.

2. Sortierfunktion für ziehbare Seitenelemente implementieren

1. HTML-Struktur
   In HTML müssen wir jedem ziehbaren Seitenelement eine eindeutige Kennung hinzufügen und diese zu jedem Seitenelementcontainer hinzufügen. Fügen Sie eine ID hinzu.

 
元素1
 
元素2
 
元素3
 
元素4
 

2. CSS-Stile
   Um die Drag-and-Drop-Funktion zu implementieren, müssen wir einige CSS-Stile hinzufügen.

.item { width: 100px; height: 100px; background-color: #ccc; margin-bottom: 10px; cursor: move; }

3. JavaScript-Code
   Mit der Elementsortier-API von Layui können Sie ganz einfach eine ziehbare Sortierfunktion für Seitenelemente implementieren.

layui.use(['element', 'jquery'], function(){ var element = layui.element; var $ = layui.jquery; // 初始化排序 element.sort('container', function(elem){ return elem.clone(); }); // 监听元素位置更新 element.on('elemSort(container)', function(elem){ // 获取排序后的元素顺序 var sortIds = []; $('#container .item').each(function(){ sortIds.push($(this).attr('id')); }); console.log(sortIds); // 在这里可以执行自己的业务逻辑，比如提交排序结果到后台 }); });

Erklärung:

• Anfangssortierung: Initialisieren Sie die Sortierung des Containers durch Aufrufen der Funktionelement.sort(). Zu diesem Zeitpunkt wird die Position jedes Seitenelements festgelegt.element.sort()函数对容器进行初始化排序，此时每个页面元素的位置将会固定。
• 监听元素位置更新：通过监听elemSort
Auf Elementpositionsaktualisierungen hören: Sie können Informationen zur Elementpositionsaktualisierung erhalten, indem Sie das elemSort-Ereignis abhören. In diesem Event-Handler können wir die sortierte Elementreihenfolge abrufen und unsere eigene Geschäftslogik ausführen.

3. Effektdemonstration

• Der Seitenelementcontainer muss ein ID-Attribut haben.
• Seitenelementen muss eine eindeutige Kennung hinzugefügt werden.

Fazit:

• Layui-Dokumentation: https://www.layui.com/doc/

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit Layui eine ziehbare Sortierfunktion für Seitenelemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!