Implémentation JavaScript de l'exemple d'élément de déplacement de la souris, compétences code_javascript

1. Avant-propos

Le premier objectif de l'implémentation des éléments glissants avec la souris est de faire glisser de nombreux petits points sur une page pour un positionnement fixe, puis de copier le code HTML et de le coller dans le code de développement de la page. C'est une telle fonction, et elle a été réalisée. beaucoup de choses, je l'ai fait partout, mais je n'ai pas d'autre choix que d'utiliser le plug-in jQuery.fn.draggable Après avoir contacté quelques informations et idées d'autres personnes, j'ai finalement perfectionné cette fonction de glissement aujourd'hui. à sa mise en œuvre

2. Idées de conception

Liez l'événement souris vers le bas à l'élément glisser, liez les événements de mouvement de la souris et de souris vers le haut à l'objet document ;
Pourquoi ne pas lier les trois événements à l'élément glisser ? ne s'exécutera pas lorsque la souris se déplace trop vite

Copier le code Le code est le suivant :

$target.bind('mousedown', fn);

$(document)
.bind('mousemove', fn)
.bind('mouseup', fn);

3. Détails de mise en œuvre du code source

Il y a beaucoup de choses à noter dans le code source de l'implémentation :

1. Tout d'abord, lors de l'appui sur la souris, lorsque vous cliquez et faites glisser l'élément, le texte de la zone peut être sélectionné. Ce n'est pas ce dont nous avons besoin. La solution est la suivante :

.

Copier le code Le code est le suivant :

// Empêcher la sélection du texte de la zone pour chrome firefox ie9
e.preventDefault();
// pour firefox ie9 || moins que ie9
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

2. Si l'élément à glisser est une image (balise img) et que la souris fait glisser l'image sur une courte distance, une petite invite interdite apparaîtra, c'est-à-dire : l'image ne peut plus être déplacée
C'est celle du navigateur. comportement par défaut, alors bloquez simplement le comportement par défaut du navigateur

Copier le code Le code est le suivant :

e.preventDefault();

3. Problèmes concernant les limites (gestion de la plage de traînée)

Le code implémenté au début est le suivant :

Copier le code Le code est le suivant :

// x, y représentent les valeurs ​​qui sera défini en faisant glisser l'élément. Les valeurs gauche, supérieure et limitObj sont les objets de la zone de déplacement. Le problème a été découvert lors des tests,
// Pendant le processus de déplacement, l'objet déplacé ne peut parfois pas être directement proche de l'élément. limite

if ( x >= limitObj._left && x <= limitObj._right ) {
$target.css({ left: x 'px' });
>
if ( y >= limitObj._top && y <= limitObj._bottom ) {
$target.css({ top : y 'px' });
}

Réflexion plus approfondie : pourquoi le problème ci-dessus se produit ? La raison est que la variable x peut être plus petite que limitObj._left ou plus grande que limitObj._right. La même chose est vraie pour la variable y
Le code doit donc. être traité comme suit :

Copier le code Le code est le suivant :

if (x < limitObj._left) {
x = limitObj._left;
}
if (x > limitObj._right) {
x = limitObj._right;
>
if (y < limitObj. _top) {
y = limitObj._top;
}
if (y > limitObj._bottom) {
y = limitObj._bottom;
}
$target.css( { gauche : x 'px', haut : y 'px' });

Enfin résolu ce problème, mais cloudgamer a donné une meilleure façon d'écrire :

Copier le code Le code est le suivant :

$target.css({
gauche : Math .max( Math.min(x, limitObj._right), limitObj._left) 'px',
haut : Math.max( Math.min(y, limitObj._bottom), limitObj._top) ' px'
});

Code source complet du programme :

Copier le code Le code est le suivant :

$.fn.extend({
    /**
     *   Autor: 博客园华子yjh 2014/02/21
     */
    drag: function(options) {
        var dragStart, dragMove, dragEnd,
            $boundaryElem, limitObj;

        function _initOptions() {
            var noop = function(){}, defaultOptions;

            defaultOptions = { // 默认配置项
                boundaryElem: 'body' // 边界容器
            };
            options = $.extend( defaultOptions, options || {} );
            $boundaryElem = $(options.boundaryElem);

            dragStart = options.dragStart || noop,
            dragMove = options.dragMove || noop,
            dragEnd = options.dragEnd || noop;
        }

        function _drag(e) {
            var clientX, clientY, offsetLeft, offsetTop,
                $target = $(this), self = this;

            limitObj = {
                _left: 0,
                _top: 0,
                _right: ($boundaryElem.innerWidth() || $(window).width()) - $target.outerWidth(),
                _bottom: ($boundaryElem.innerHeight() || $(window).height()) - $target.outerHeight()
            };

            // 记录鼠标按下时的位置及拖动元素的相对位置
            clientX = e.clientX;
            clientY = e.clientY;
            offsetLeft = this.offsetLeft;
            offsetTop = this.offsetTop;

            dragStart.apply(this, arguments);
            $(document).bind('mousemove', moveHandle)
                        .bind('mouseup', upHandle);

            // 鼠标移动事件处理
            function moveHandle(e) {
                var x = e.clientX - clientX + offsetLeft;
                var y = e.clientY - clientY + offsetTop;

                $target.css({
                    left: Math.max( Math.min(x, limitObj._right),  limitObj._left) + 'px',
                    top: Math.max( Math.min(y, limitObj._bottom),  limitObj._top) + 'px'
                });

               dragMove.apply(self, arguments);
                // 阻止浏览器默认行为(鼠标在拖动图片一小段距离，会出现一个禁止的小提示，即：图片不能再拖动)
               e.preventDefault();
                                                                                                                                                                                                      );

_initOptions(); // Initialiser l'objet de configuration

$(this)
.css({ position : 'absolute' })
.each(function(){
$(this).bind('mousedown', function(e){
          _drag.apply(this, [e]);

                                                                                                                                      // pour Firefox ie9 inférieur à ie9

                window.getSelection().                       AllRanges() : document.selection.empty( );                                                 );

Appel d'instance :





Copier le code


Le code est le suivant :


// Instance d'appel

(fonction (){ $('.drag-elem').drag({

borderElem : '#boundary',

dragStart : function(){

$(this).html('< ;span> Préparez-vous à faire glisser').css({ zIndex: 2 }).siblings().css({ zIndex: 1 });

    },     dragMove: function(){ var pos = $ (this).position(); }, dragEnd : function(){ $(this).html('Drag end '); }) ;}());