Ausführliche Erläuterung von Beispielen zum Ändern von DIV durch Ziehen mit der Maus-js-Tutorial-php.cn

Ausführliche Erläuterung von Beispielen zum Ändern von DIV durch Ziehen mit der Maus

零下一度

Freigeben： 2017-07-19 17:36:25

Original

1202 Leute haben es durchsucht

1. Erste Implementierung

1.1 HTML-Code

<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>

Nach dem Login kopieren

1.2 JS-Code

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

Nach dem Login kopieren

1.3 Daher kann

nur nach links gezogen werden, um die Div-Breite zu verkleinern, aber das Ziehen nach rechts ist nutzlos! Der Grund dafür ist, dass das Mousemove-Ereignis, bei dem die Maus nach rechts gezogen wird, vom Div nicht erfasst werden kann. Es ist auch schwer, beim Ziehen aufzuhören! Es muss also verbessert werden.

2. Erneut verbessern

　　　　　　　　　　$(&#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;);  =

Nach dem Login kopieren

Dieses Mal ist das obige Problem gelöst, Sie können nach rechts ziehen und anhalten jederzeit. Bist du hier fertig? NEIN!

Was passiert, wenn ich ein weiteres Div einführe und verhindere, dass das Mouseup-Ereignis sprudelt? Die Antwort ist, dass es nach dem Ziehen zu diesem anderen Div und dem Loslassen der Maus nicht mehr gestoppt werden kann!

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

Nach dem Login kopieren

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

Nach dem Login kopieren

3. Perfekte Lösung für

Schleppstoppmöglichkeit Wie kann das Problem der Interferenz durch andere Elemente gelöst werden? Als ich über die Funktionen einiger Popup-Ebenen nachdachte, die durch Klicken auf andere Stellen ausgeblendet werden können, dachte ich darüber nach, eine Maskenebene hinzuzufügen, damit immer auf das Mouseup-Ereignis reagiert werden kann.

　　　　　　　　$('#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事件)});

Nach dem Login kopieren

4. Vollständiger Code und endgültiger Effekt

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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen zum Ändern von DIV durch Ziehen mit der Maus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!