Comment utiliser Layui pour implémenter la fonction de tri des éléments de page déplaçables

Comment utiliser Layui pour implémenter la fonction de tri des éléments de page déplaçables

Avant-propos :
Dans le développement Web, la fonction de tri des éléments de page est une exigence courante. En utilisant Layui comme framework frontal, vous pouvez facilement implémenter le tri par glisser-déposer des éléments de page. Cet article expliquera comment utiliser Layui pour implémenter cette fonction et fournira des exemples de code spécifiques.

1. Préparation du projet

1. Téléchargez Layui et configurez-le dans le projet. Adresse de téléchargement de Layui : https://www.layui.com/
2. Créez un fichier HTML et présentez les fichiers liés à Layui.

2. Implémenter la fonction de tri des éléments de page déplaçables

1. Structure HTML
   En HTML, nous devons ajouter un identifiant unique à chaque élément de page déplaçable et l'ajouter à chaque conteneur d'élément de page Ajoutez un identifiant.

<div id="container">
  <div class="item" id="item1">元素1</div>
  <div class="item" id="item2">元素2</div>
  <div class="item" id="item3">元素3</div>
  <div class="item" id="item4">元素4</div>
</div>

2. Styles CSS
   Afin d'implémenter la fonction glisser-déposer, nous devons ajouter quelques styles CSS.

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

3. Code JavaScript
   En utilisant l'API de tri d'éléments de Layui, vous pouvez facilement implémenter la fonction de tri d'éléments de page déplaçables.

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);
    // 在这里可以执行自己的业务逻辑，比如提交排序结果到后台
  });
});

Explication :

• Tri initial : Initialisez le tri du conteneur en appelant la fonction element.sort() A ce moment, la position de chaque élément de la page sera corrigée. element.sort()函数对容器进行初始化排序，此时每个页面元素的位置将会固定。
• 监听元素位置更新：通过监听elemSort
Écoutez les mises à jour de la position des éléments : vous pouvez obtenir des informations sur la mise à jour de la position des éléments en écoutant l'événement elemSort. Dans ce gestionnaire d'événements, nous pouvons obtenir l'ordre des éléments triés et exécuter notre propre logique métier.

3. Démonstration d'effet

Ouvrez le navigateur et chargez le fichier HTML Vous pouvez maintenant essayer de faire glisser les éléments de la page pour les trier. Lorsque vous faites glisser des éléments de page vers un nouvel emplacement, la console imprimera l'ordre trié des éléments.

Remarque :

• Le conteneur d'éléments de page doit avoir un attribut id.
• Les éléments de page doivent avoir un identifiant unique ajouté.

Conclusion : 

Grâce aux étapes ci-dessus, nous avons utilisé avec succès Layui pour implémenter la fonction de tri des éléments de page déplaçables. J'espère que cet article vous sera utile, si vous avez des questions, n'hésitez pas à me contacter. Merci d'avoir lu!

Référence :

• Documentation Layui : https://www.layui.com/doc/

🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!