HTML, CSS et jQuery : un guide technique pour implémenter le tri par glisser-déposer

HTML, CSS et jQuery : Guide technique pour la mise en œuvre du tri par glisser-déposer

Dans la conception Web moderne, le tri par glisser-déposer est une fonctionnalité très courante. Il permet aux utilisateurs de trier en faisant glisser des éléments et offre une bonne expérience utilisateur lors des mises à jour en temps réel. Cet article vous présentera comment utiliser HTML, CSS et jQuery pour implémenter une simple fonction de tri par glisser-déposer.

Avant de commencer, nous devons d'abord préparer une structure HTML de base et des styles CSS, qui fourniront une base pour notre tri ultérieur par glisser-déposer.

Structure HTML :

<ul id="sortable">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
  <li>项目 4</li>
  <li>项目 5</li>
</ul>

Style CSS :

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

Ensuite, nous devons introduire la bibliothèque jQuery et quelques plug-ins jQuery UI, qui nous fourniront le support nécessaire pour implémenter le tri par glisser-déposer. Insérez le code suivant dans la balise de la page Web : 标签中插入以下代码：

<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

Maintenant que nous avons préparé tout le code, les bibliothèques et les plug-ins nécessaires, nous pouvons commencer à implémenter le glisser-déposer tri.

Tout d'abord, nous devons utiliser la méthode sortable() de jQuery UI pour rendre la liste déplaçable et triable. Insérez le code suivant dans le code JavaScript : 🎜rrreee🎜 Ensuite, nous devons ajouter une fonction de rappel pour l'événement une fois le tri terminé, afin que nous puissions obtenir les résultats de tri mis à jour lorsque le tri de la liste change. Modifiez le code JavaScript comme suit : 🎜rrreee🎜Dans ce code, nous utilisons la méthode toArray() de jQuery UI pour obtenir l'ID de l'élément de liste trié et l'imprimer sur la console. Vous pouvez traiter davantage les résultats du tri en fonction des besoins réels, comme enregistrer les résultats du tri ou mettre à jour l'affichage de l'interface. 🎜🎜Enfin, pour ajouter de l'interactivité, nous pouvons ajouter quelques effets d'animation lors du tri. Modifiez le code JavaScript comme suit : 🎜rrreee🎜Dans ce code, nous utilisons la méthode disableSelection() de jQuery UI pour empêcher la sélection du texte de l'élément de liste. 🎜🎜À ce stade, nous avons terminé la mise en œuvre d'une simple fonction de tri par glisser-déposer. Vous pouvez ajuster le style et étendre les fonctions en fonction de vos propres besoins, telles que l'ajout de fonctions de suppression, d'édition et autres. 🎜🎜Résumé :
Cet article fournit un exemple d'utilisation de HTML, CSS et jQuery pour implémenter le tri par glisser-déposer. En utilisant la méthode sortable() de jQuery UI, nous pouvons facilement implémenter le tri par glisser-déposer de la liste, et une fois le tri terminé, nous pouvons facilement obtenir les résultats triés. J'espère que cet article vous aidera à comprendre le processus de mise en œuvre du tri par glisser-déposer. 🎜🎜Exemple de code : https://codepen.io/pen/?template=WNRZebr🎜

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!