Maison >interface Web >js tutoriel >HTML, CSS et jQuery : astuces pour le tri des images par glisser-déposer

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

WBOYoriginal: 2023-10-25 09:03:291245parcourir

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>
```
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;
}
```
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();
});
```
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

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!

jquery css html Object JS 对象 ul li https ui

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：HTML, CSS et jQuery : créez un magnifique mur d'imagesArticle suivant：HTML, CSS et jQuery : créez un magnifique mur d'images

Articles Liés

Voir plus