返回首页 |

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

网站开发鼠标拖动改动DIV等网页元素的巨细的完成办法

时间:2017-09-09 编辑:admin

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.php" type="text/phpscript" /script /head body h1 div change width by drag /h1 div id="pos" /div div id="myDiv" /div /body /html

1.2 js代码

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.('cursor','e-resize');
 }else{
 if(!isMouseDown){
 ele.('cursor','auto');
 if(isMouseDown){
 ele.width((e.pageX-eleLeft-borderLen)+'px'); //新鼠标方位-div距左-borderLen
 mouseup:function(e){
 isMouseDown = false;
 });

1.3 成果

只能往左拖动使div宽度变小,往右拖动没有用!原因往右拖动鼠标mousemove事情无法被div捕获了。拖动时也很难停下来!所以得改善。

2.再次改善

$('#myDiv').bind({
 mousedown:function(e){
 var ele = $(this);
 var rightPos = eleLeft + ele.width() + borderLen;
 if(rightPos-5 = e.pageX && e.pageX = rightPos){
 isMouseDown = true;
 $('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;
 });

这次处理了上述问题,能够往右拖,而且随时能够停下来了。到这儿就完结了吗?NO!

当我们引进一个其他div,而且阻挠mouseup事情冒泡状况怎么样呢?答案是,拖动到这个其它div上铺开鼠标后无法停止下来!

 div id="otherDiv" /div 


浏览:

网站建设

流程

    网站建设流程