1.初次实现

1.1 html代码

<html xmlns="http://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" 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代码

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

只能往左拖动使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" style="border: 2px solid blue;width: 200px;height: 200px;margin-left: 400px"></div>
　　　　　　　　　$('#otherDiv').mouseup(function(e){

                    //e.preventDefault(); //阻止默认行为

                    e.stopPropagation(); //阻止事件冒泡(导致body捕获不到mouseup事件)

                });

3.完美解决

拖动停止可能受到其它元素的干扰，怎么解决？想到一些弹出层点击其它其它地方隐藏的功能，让我想到了，加一个遮罩层，让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 = $('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.完整代码和最终效果

<html xmlns="http://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" 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>

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

    </body>

    <script type="text/javascript">

            $(document).ready(function(){

                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;

                            //创建遮罩层，防止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事件)

                });

            });

        </script>

</html>

鼠标拖动改变DIV等网页元素的大小的最佳实践的更多相关文章

  1. jQuery实现鼠标拖动改变Div高度

    最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...

  2. jquery 拖动改变div大小

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. JS 实现 ResizeBar，可拖动改变两个区域(带iframe)大小

    将网页化成两个区域,左边区域是一个树结构,右边区域是一个iframe,点击左边区域时,右边区域加载页面.实现功能:在两个区域间加一个可拖动条,拖动时改变左右两个区域的大小.在Google上搜索slid ...

  4. [置顶] 原创鼠标拖动实现DIV排序

    先上效果图: 对比传统的排序,这是一个很不错的尝试,希望对大家有启发. 大家可以参考我的上一篇博文:http://blog.csdn.net/littlebo01/article/details/12 ...

  5. jQuery鼠标拖曳改变div大小（模拟textarea右下角拖曳）

    jQuery.fn.extend({ drag: function() { $(document).off("mouseup.drag").on("mouseup.dra ...

  6. C# 运行时通过鼠标拖动改变控件的大小

    来源:http://blog.csdn.net/yanleigis/article/details/1819447 using System; using System.Collections.Gen ...

  7. Web前端开发最佳实践（6）：过时的块状元素和行内元素

    前言 前端程序员在学习HTML的过程中,肯定接触过页面元素的两个基本类型:块状元素和行内元素,也有大量的技术文章或者教程在介绍这两个概念.但这两个HTML元素相关的概念从字面上却和CSS样式有着很深的 ...

  8. 使用JS制作一个鼠标可拖的DIV（一）——鼠标拖动

    使用 JS 来实现一个可拖动的DIV,主要是使用到以下几个事件: 1.鼠标按下:DIV元素的onmousedown. 2.鼠标按住拖动:document 的 onmousemove 元素. 3.鼠标放 ...

  9. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

随机推荐

  1. API自动化测试 Soap UI工具介绍

    一.   建立测试用例 (一)   基本概念 soapUI 中工程的层次结构 项目名称:位于最上层 (BookStoreTest),项目可以包含多个服务的定义. REST 服务定义:服务其实是对多个 ...

  2. [Swift实际操作]八、实用进阶-(5)通过间接代理进行对象间的消息传递

    本文将为你演示,如何通过简介代理的方式,进行对象间的消息传递在左侧的项目导航区,打开自定义视图的代码文件(CustomView.swift). import UIKit class CustomVie ...

  3. ubuntu14.04搭建ftp服务器

    一,搭建匿名FTP服务器 实现ftp匿名登录,上传,下载,重命名文件. 1. 首先安装vsftpd:sudo apt-get install vsftpd,装好之后,默认的ftp根目录是在 /srv/ ...

  4. C# - 操作大型XML文件

    对于小型XML文件,利用XDocument和XMLDocument可以很方便进行读写(推荐XDocument),但问题是XDocument和XMLDocument是In-Memory类型的,随着文件大 ...

  5. handlersocket优缺点

    HandlerSocket的优势和特点: 1)         支持多种查询模式 HandlerSocket目前支持索引查询(主键索引和非主键的普通索引均可),索引范围扫描,LIMIT子句,也即支持增 ...

  6. NASA的10条代码编写原则

    NASA的10条代码编写原则 作者: Gerard J. Holzmann 来源: InfoQ 原文链接 英文原文:NASA's 10 Coding Rules for Writing Safety ...

  7. ${__BeanShell(${SCRIPT})}

    通过将变量名称括在' $ { '和' } '中来引用测试元素中的变量. 函数以相同的方式引用,但按照惯例,函数名称以“ __ ” 开头,以避免与用户值名称冲突*.有些函数使用参数来配置它们,这些函数用 ...

  8. python高级——目录

    目  录 python高级(一)—— python数据模型(特殊方法) python高级(二)—— python内置序列类型 python高级(三)—— 字典和集合(泛映射类型) python高级(四 ...

  9. [原创]markdown语法学习（commonmark）

    CommonMark是markdown的解析器,以下是部分学习链接: commonmark规范 https://spec.commonmark.org/ commonmark帮助 https://co ...

  10. 进阶篇：3.9）3d打印件设计

    本章目的:了解3d打印,购买3d打印机. 1.3d打印基础知识: 现在主流的3d打印技术有4种:①FDM:②SLA:③SLS:④3DP.具体如下: ①熔融沉积造型(Fused deposition m ...