HTML, CSS et jQuery : astuces pour le tri des images par glisser-déposer-js tutoriel-php.cn

HTML, CSS et jQuery : astuces pour le tri des images par glisser-déposer

WBOY

Libérer： 2023-10-25 09:03:29

original

1173 Les gens l'ont consulté

HTML, CSS et jQuery : astuces pour le tri des images par glisser-déposer

HTML, CSS et jQuery : Conseils pour implémenter le tri par glisser-déposer des images

Dans la conception Web moderne, le tri par glisser-déposer des images est devenu une fonctionnalité courante et populaire. En faisant glisser les images, les utilisateurs peuvent ajuster librement l'ordre des images, améliorant ainsi l'expérience utilisateur et l'interactivité. Cet article expliquera comment utiliser HTML, CSS et jQuery pour implémenter le tri par glisser-déposer d'images et fournira des exemples de code spécifiques.

1. Structure HTML

Tout d'abord, créez un fichier HTML et définissez la structure de base de la page. Nous utiliserons une liste non ordonnée (

) et contient une balise d'image () :
```
<!DOCTYPE html>
<html>
<head>
    <title>图像拖拽排序</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <ul id="sortable">
        <li><img  src="image1.jpg" alt="HTML, CSS et jQuery : astuces pour le tri des images par glisser-déposer" ></li>
        <li><img  src="image2.jpg" alt="HTML, CSS et jQuery : astuces pour le tri des images par glisser-déposer" ></li>
        <li><img  src="image3.jpg" alt="HTML, CSS et jQuery : astuces pour le tri des images par glisser-déposer" ></li>
        <li><img  src="image4.jpg" alt="HTML, CSS et jQuery : astuces pour le tri des images par glisser-déposer" ></li>
        <li><img  src="image5.jpg" alt="HTML, CSS et jQuery : astuces pour le tri des images par glisser-déposer" ></li>
    </ul>

    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
```
Copier après la connexion
2. Style CSS
Afin d'obtenir l'effet de tri par glisser-déposer, nous avons besoin utiliser CSS pour définir le style de l'image. Dans le fichier style.css, ajoutez le code de style suivant :
```
#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#sortable li {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 10px;
    border: 1px solid #ccc;
}

#sortable img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
```
Copier après la connexion
3. Fonction de tri par glisser-déposer jQuery
Afin d'implémenter la fonction de tri par glisser-déposer, nous utiliserons la méthode triable fournie par la bibliothèque jQuery UI. Dans le fichier script.js, ajoutez le code suivant :
```
$(function() {
    $("#sortable").sortable();
});
```
Copier après la connexion
4. Effet complet

Grâce aux étapes ci-dessus, nous avons terminé l'implémentation de base du tri par glisser-déposer des images. Ouvrez votre navigateur, exécutez le fichier HTML et vous verrez une liste d'images. Vous pouvez essayer d'utiliser votre souris pour cliquer et faire glisser les images pour les trier.

Il convient de noter que pour implémenter la fonction de tri par glisser-déposer, vous devez introduire les bibliothèques jQuery et jQuery UI dans le projet et vous assurer que leurs chemins de fichiers sont correctement définis.

Résumé

En utilisant HTML, CSS et jQuery, nous pouvons facilement implémenter la fonction de tri par glisser-déposer des images. L'exemple de code ci-dessus fournit un cadre de base que vous pouvez modifier et étendre en fonction des besoins réels. J'espère que cet article vous aidera à comprendre les techniques de tri des images par glisser-déposer, et je vous souhaite du succès dans la conception de sites Web !

Source de référence :
- Documentation officielle de l'interface utilisateur jQuery : https://jqueryui.com/sortable/
- Adaptabilité des objets CSS : https://developer.mozilla.org/zh-CN/docs/Web/CSS/ object -en forme