"/>
">Home >Web Front-end >JS Tutorial >Detailed explanation of examples of changing DIV by dragging the mouse with the mouse
1. First implementation
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>
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; $('#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+rightPos);if(rightPos-5 <= e.pageX && e.pageX <= rightPos){ ele.css('cursor','e-resize'); }else{if(!isMouseDown){ ele.css('cursor','auto'); } }if(isMouseDown){ ele.width((e.pageX-eleLeft-borderLen)+'px'); //新鼠标位置-div距左-borderLen } }, mouseup:function(e){ isMouseDown = false; } });
1.3 Result
You can only drag to the left to make the div width smaller, dragging to the right is useless! The reason is that the mousemove event of dragging the mouse to the right cannot be captured by the div. It's also hard to stop while dragging! So it has to be improved.
2. Improve again
$('#myDiv' ele = $( rightPos = eleLeft + ele.width() +(rightPos-5 <= e.pageX && e.pageX <== 'body' ele = $('#myDiv' rightPos = eleLeft + ele.width() +'#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+(rightPos-5 <= e.pageX && e.pageX <='cursor','e-resize'(!'cursor','auto'-eleLeft-borderLen)+'px'); =
This time the above problem is solved. You can drag to the right and stop at any time. Are you done here? NO!
What happens when I introduce another div and prevent the mouseup event from bubbling? The answer is that after dragging to this other div and releasing the mouse, it cannot be stopped!
<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. Perfect solution
Drag stop may be affected by other elements Interference, how to solve it? Thinking about the functions of some pop-up layers that can be hidden by clicking on other places, I thought of adding a mask layer so that the mouseup event can always be responded to. Isn't it done?
$('#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 = $('body').width();var bodyHeight = $('body').height(); $('body').append('<div id="mask" style="opacity:0.2;top:0px;left:0px;background-color:green;position:absolute;z-index:9999;width:'+bodyWidth+'px;height:'+bodyHeight+'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('cursor','e-resize'); }else{if(!isMouseDown){ ele.css('cursor','auto'); } }if(isMouseDown){ ele.width((e.pageX-eleLeft-borderLen)+'px'); } }, mouseup:function(e){ isMouseDown = false; $('#mask').remove(); } }); $('#otherDiv').mouseup(function(e){//e.preventDefault(); //阻止默认行为e.stopPropagation(); //阻止事件冒泡(导致body捕获不到mouseup事件)});
4. Complete code and final effect
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>
The above is the detailed content of Detailed explanation of examples of changing DIV by dragging the mouse with the mouse. For more information, please follow other related articles on the PHP Chinese website!