Maison > Article > interface Web > Explication détaillée d'exemples de modification de DIV en faisant glisser la souris avec la souris

Explication détaillée d'exemples de modification de DIV en faisant glisser la souris avec la souris

零下一度original: 2017-07-19 17:36:251151parcourir

1. Première implémentation

Code html 1.1

<html xmlns="www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>div change width by drag</title><script src="../jQuery/jquery-1.8.3.min.js?1.1.11" type="text/javascript"></script></head><body><h1>div change width by drag</h1><div id="pos" style="color:red"></div><div id="myDiv" style="border:2px solid red;width:300px;height:50px;margin-left: 100px;margin-top: 20px"></div></body></html>

Code js 1.2

　　　　　　　　　 var eleLeft = $('#myDiv').offset().left;var isMouseDown = false;var borderLen = 4; //左右边框                
                $('#myDiv').bind({
                    mousedown:function(e){var ele = $(this);var rightPos = eleLeft + ele.width() + borderLen;if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
                            isMouseDown = true;

                        }
                    },
            
                    mousemove:function(e){var ele =  $(this);var rightPos = eleLeft + ele.width() + borderLen;
                        $(&#39;#pos&#39;).text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+rightPos);if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
                            ele.css(&#39;cursor&#39;,&#39;e-resize&#39;);
                        }else{if(!isMouseDown){
                                ele.css(&#39;cursor&#39;,&#39;auto&#39;);
                            }
                        }if(isMouseDown){
                            ele.width((e.pageX-eleLeft-borderLen)+&#39;px&#39;);  //新鼠标位置-div距左-borderLen                        }
                    },
                    mouseup:function(e){
                        isMouseDown = false;
                    }
                });

1.3 Par conséquent,

ne peut être déplacé que vers la gauche pour réduire la largeur du div, mais glisser vers la droite est inutile ! La raison en est que l'événement mousemove consistant à faire glisser la souris vers la droite ne peut pas être capturé par le div. Il est également difficile de s'arrêter en traînant ! Il faut donc l'améliorer.

2. Amélioré à nouveau

　　　　　　　　　　$(&#39;#myDiv&#39; ele = $( rightPos = eleLeft + ele.width() +(rightPos-5 <= e.pageX && e.pageX <== &#39;body&#39; ele = $(&#39;#myDiv&#39; rightPos = eleLeft + ele.width() +&#39;#pos&#39;).text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+(rightPos-5 <= e.pageX && e.pageX <=&#39;cursor&#39;,&#39;e-resize&#39;(!&#39;cursor&#39;,&#39;auto&#39;-eleLeft-borderLen)+&#39;px&#39;);  =

Cette fois, le problème ci-dessus est résolu, vous pouvez faire glisser vers la droite et vous pouvez arrêter. à tout moment. Avez-vous fini ici ? NON !

Que se passe-t-il lorsque j'introduis un autre div et que j'empêche l'événement mouseup de bouillonner ? La réponse est qu'après avoir glissé vers cet autre div et relâché la souris, il ne peut pas être arrêté !

<div id="otherDiv" style="border: 2px solid blue;width: 200px;height: 200px;margin-left: 400px"></div>

　　　　　　　　　$('#otherDiv').mouseup(function(e){//e.preventDefault(); //阻止默认行为e.stopPropagation(); //阻止事件冒泡(导致body捕获不到mouseup事件)});

3. Solution parfaite pour

possibilité d'arrêt de glissement Comment résoudre le problème des interférences d’autres éléments ? En pensant aux fonctions de certains calques contextuels qui peuvent être masqués en cliquant à d'autres endroits, j'ai pensé à ajouter un calque de masque afin que l'on puisse toujours répondre à l'événement mouseup.

　　　　　　　　$('#myDiv').bind({
                    mousedown:function(e){var ele = $(this);var rightPos = eleLeft + ele.width() + borderLen;if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
                            isMouseDown = true;//创建遮罩层，防止mouseup事件被其它元素阻止冒泡，导致mouseup事件无法被body捕获，导致拖动不能停止var bodyWidth = $(&#39;body&#39;).width();var bodyHeight = $(&#39;body&#39;).height();
                            $(&#39;body&#39;).append(&#39;<div id="mask" style="opacity:0.2;top:0px;left:0px;background-color:green;position:absolute;z-index:9999;width:&#39;+bodyWidth+&#39;px;height:&#39;+bodyHeight+&#39;px;"></div>');
                        }
                    }
                });

                $('body').bind({
                    mousemove:function(e){var ele = $('#myDiv');var rightPos = eleLeft + ele.width() + borderLen;
                        $('#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+rightPos);if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
                            ele.css(&#39;cursor&#39;,&#39;e-resize&#39;);
                        }else{if(!isMouseDown){
                                ele.css(&#39;cursor&#39;,&#39;auto&#39;);
                            }
                        }if(isMouseDown){
                            ele.width((e.pageX-eleLeft-borderLen)+&#39;px&#39;); 
                        }
                    },
                    mouseup:function(e){
                        isMouseDown = false;
                        $(&#39;#mask&#39;).remove();
                    }
                });

                $(&#39;#otherDiv&#39;).mouseup(function(e){//e.preventDefault(); //阻止默认行为e.stopPropagation(); //阻止事件冒泡(导致body捕获不到mouseup事件)});

4. Code complet et effet final

div change width by drag
        div change width by drag

        
<div id="otherDiv" style="border: 2px solid blue;width: 200px;height: 200px;margin-left: 400px"></div>

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!

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：Compétences que vous devez maîtriser en JavaScriptArticle suivant：Compétences que vous devez maîtriser en JavaScript

Articles Liés

Voir plus