implémentation du glisser-déplacer de la souris jquery

jQuery est une bibliothèque JavaScript populaire qui peut facilement manipuler le DOM pour implémenter les fonctions glisser-déposer de la souris. Dans cet article, nous présenterons en détail comment utiliser jQuery pour implémenter la fonction glisser de la souris.

1. Tout d'abord, introduisez la bibliothèque jQuery dans votre fichier HTML. Vous pouvez télécharger depuis le site officiel de jQuery ou utiliser CDN :

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2. Créez un élément dans un fichier HTML, tel qu'un div :

<div id="dragElement">这是一个可拖拽的元素。</div>

3. Utilisez CSS pour définir le style de base de l'élément, tel que la largeur, hauteur, couleur d'arrière-plan, etc. :

<style>
    #dragElement {
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }
</style>

4. Écrivez une fonction glisser en utilisant jQuery :

$(function() {
    var isDragging = false;
    var currentX;
    var currentY;
    var initialX;
    var initialY;
    var xOffset = 0;
    var yOffset = 0;
    
    $('#dragElement').mousedown(function(e) {
        initialX = e.clientX - xOffset;
        initialY = e.clientY - yOffset;

        if (e.target === this) {
            isDragging = true;
        }
    });

    $(document).mousemove(function(e) {
        if (isDragging) {
            e.preventDefault();

            currentX = e.clientX - initialX;
            currentY = e.clientY - initialY;

            xOffset = currentX;
            yOffset = currentY;

            setTranslate(currentX, currentY, $('#dragElement'));
        }
    });

    $(document).mouseup(function(e) {
        initialX = currentX;
        initialY = currentY;

        isDragging = false;
    });

    function setTranslate(xPos, yPos, el) {
        el.css('transform', 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)');
    }
});

5. Utilisez CSS pour rendre l'élément déplaçable :

<style>
    #dragElement {
        cursor: move;
    }
</style>

6. Enfin, vous pouvez tester si votre fonction glisser fonctionne correctement . Essayez de maintenir le bouton gauche de la souris enfoncé et de déplacer la souris pour faire glisser l'élément.

La fonction glisser dans le code ci-dessus comprend les étapes suivantes :

a Obtenez la position initiale de l'élément et les coordonnées actuelles de la souris lorsque la souris est enfoncée.

b. Lorsque la souris bouge, calculez le décalage de l'élément et appliquez-le à la position de l'élément.

c. Lorsque la souris est relâchée, enregistrez la position finale de l'élément.

d. La fonction setTranslate applique une position à un élément.

Conclusion

Le glissement de la souris peut rendre le site Web plus utilisable et plus convivial, et constitue une méthode d'interaction de base. Utiliser jQuery pour implémenter la fonction glisser de la souris est très simple et ne nécessite que quelques lignes de code JavaScript. J'espère que cet article vous a aidé à comprendre comment implémenter cette fonctionnalité et l'utiliser sur votre site Web.

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!