当前位置：主页 > 查看内容

jQuery实现鼠标拖动div改变位置、大小

发布时间：2021-05-19 00:00| 有位朋友查看

简介：???????实现类似windows窗体的效果在中间拖动改变div位置在边缘拖动改变div大小鼠标在相应的位置改变成相应的形状效果如图: 截图没显示鼠标代码如下 $ ( .test1 ) . mousemove ( function ( e ) { $ ( .test1 ) . unbind ( mousedown ) ; $ ( .test1 ) . c……

???????实现类似windows窗体的效果，在中间拖动改变div位置，在边缘拖动改变div大小，鼠标在相应的位置改变成相应的形状
效果如图: （截图没显示鼠标）

在这里插入图片描述

代码如下：

			$(".test1").mousemove(function(e){
                $(".test1").unbind("mousedown");
                $(".test1").css("cursor","default");
                //$("span > b").text(parseInt($("div").width()));
                var left = $(".test1").offset().left;
                var top = $(".test1").offset().top;

                // 如果鼠标在中间
                if(e.clientX - left > 10 && e.clientX-left < parseInt($(".test1").width()) - 10 
                && e.clientY - top  > 10 && e.clientY-top  < parseInt($(".test1").height()) - 10) {
                    $(".test1").css("cursor","move");
                    $(".test1").mousedown(function(e) {
                        var ismove = true;
                        var x = e.pageX - $(".test1").offset().left;
                        var y = e.pageY - $(".test1").offset().top;
                        $(document).mousemove(function(e) {
                            if(ismove) {
                                $(".test1").css({"left":e.pageX - x, "top":e.pageY - y});
                            }
                        }).mouseup(function() {
                            ismove = false;
                        });
                    });
                }
                
                //如果鼠标在左上角
                if(e.clientX - left < 10 && e.clientY - top < 10) {
                    $(".test1").css("cursor","nw-resize");
                    $(".test1").mousedown(function(e) {
                        var ismove = true;
                        var y = e.pageY - $(".test1").offset().top;
                        var h = e.pageY + parseInt($(".test1").css("height"));
                        $(document).mousemove(function(e) {
                            if(ismove) {
                                $(".test1").css({"height":h - e.pageY, "top":e.pageY - y});
                            }
                        }).mouseup(function() {
                            ismove = false;
                        });
                    });
                    $(".test1").mousedown(function(e) {
                        var ismove = true;
                        var x = e.pageX - $(".test1").offset().left;
                        var w = e.pageX + parseInt($(".test1").css("width"));
                        $(document).mousemove(function(e) {
                            if(ismove) {
                                $(".test1").css({"width":w - e.pageX, "left":e.pageX - x});
                            }
                        }).mouseup(function() {
                            ismove = false;
                        });
                    });
                }

                //如果鼠标在上
                if(e.clientY - top < 10 && e.clientX - left > 10 && e.clientX-left < parseInt($(".test1").width()) - 10) {
                    $(".test1").css("cursor","n-resize");
                    $(".test1").mousedown(function(e) {
                        var ismove = true;
                        var y = e.pageY - $(".test1").offset().top;
                        var h = e.pageY + parseInt($(".test1").css("height"));
                        $(document).mousemove(function(e) {
                            if(ismove) {
                                $(".test1").css({"height":h - e.pageY, "top":e.pageY - y});
                            }
                        }).mouseup(function() {
                            ismove = false;
                        });
                    });
                }

                //如果鼠标在右上角
                if(e.clientY - top < 10 && e.clientX-left > parseInt($(".test1").width()) - 10) {
                    $(".test1").css("cursor","ne-resize");
                    $(".test1").mousedown(function(e) {
                        var ismove = true;
                        var y = e.pageY - $(".test1").offset().top;
                        var h = e.pageY + parseInt($(".test1").css("height"));
                        $(document).mousemove(function(e) {
                            if(ismove) {
                                $(".test1").css({"height":h - e.pageY, "top":e.pageY - y});
                            }
                        }).mouseup(function() {
                            ismove = false;
                        });
                    });
                    $(".test1").mousedown(function(e) {
                        var ismove = true;
                        var x = e.pageX - $(".test1").offset().left;
                        var w = e.pageX - parseInt($(".test1").css("width"));
                        $(document).mousemove(function(e) {
                            if(ismove) {
                                $(".test1").css({"width":e.pageX - w});
                            }
                        }).mouseup(function() {
                            ismove = false;
                        });
                    });
                }

                //如果鼠标在右
                if(e.clientX-left > parseInt($(".test1").width()) - 10 && e.clientY - top > 10 && e.clientY-top  < parseInt($(".test1").height()) - 10) {
                    $(".test1").css("cursor","e-resize");
                    $(".test1").mousedown(function(e) {
                        var ismove = true;
                        var x = e.pageX - $(".test1").offset().left;
                        var w = e.pageX - parseInt($(".test1").css("width"));
                        $(document).mousemove(function(e) {
                            if(ismove) {
                                $(".test1").css({"width":e.pageX - w});
                            }
                        }).mouseup(function() {
                            ismove = false;
                        });
                    });
                }

                //如果鼠标在右下
                if(e.clientX-left > parseInt($(".test1").width()) - 10 && e.clientY-top  > parseInt($(".test1").height()) - 10) {
                    $(".test1").css("cursor","se-resize");
                    $(".test1").mousedown(function(e) {
                        var ismove = true;
                        var x = e.pageX - $(".test1").offset().left;
                        var w = e.pageX - parseInt($(".test1").css("width"));
                        $(document).mousemove(function(e) {
                            if(ismove) {
                                $(".test1").css({"width":e.pageX - w});
                            }
                        }).mouseup(function() {
                            ismove = false;
                        });
                    });
                    $(".test1").mousedown(function(e) {
                        var ismove = true;
                        var y = e.pageY - $(".test1").offset().top;
                        var h = e.pageY - parseInt($(".test1").css("height"));
                        $(document).mousemove(function(e) {
                            if(ismove) {
                                $(".test1").css({"height":e.pageY - h});
                            }
                        }).mouseup(function() {
                            ismove = false;
                        });
                    });
                }

                //如果鼠标在下
                if(e.clientY-top  > parseInt($(".test1").height()) - 10 && e.clientX - left > 10 && e.clientX-left < parseInt($(".test1").width()) - 10) {
                    $(".test1").css("cursor","s-resize");
                    $(".test1").mousedown(function(e) {
                        var ismove = true;
                        var y = e.pageY - $(".test1").offset().top;
                        var h = e.pageY - parseInt($(".test1").css("height"));
                        $(document).mousemove(function(e) {
                            if(ismove) {
                                $(".test1").css({"height":e.pageY - h});
                            }
                        }).mouseup(function() {
                            ismove = false;
                        });
                    });
                }

                //如果鼠标在左下
                if(e.clientY-top  > parseInt($(".test1").height()) - 10 && e.clientX - left < 10) {
                    $(".test1").css("cursor","sw-resize");
                    $(".test1").mousedown(function(e) {
                        var ismove = true;
                        var x = e.pageX - $(".test1").offset().left;
                        var w = e.pageX + parseInt($(".test1").css("width"));
                        $(document).mousemove(function(e) {
                            if(ismove) {
                                $(".test1").css({"width":w - e.pageX, "left":e.pageX - x});
                            }
                        }).mouseup(function() {
                            ismove = false;
                        });
                    });
                    $(".test1").mousedown(function(e) {
                        var ismove = true;
                        var y = e.pageY - $(".test1").offset().top;
                        var h = e.pageY - parseInt($(".test1").css("height"));
                        $(document).mousemove(function(e) {
                            if(ismove) {
                                $(".test1").css({"height":e.pageY - h});
                            }
                        }).mouseup(function() {
                            ismove = false;
                        });
                    });
                }
                
                //如果鼠标在左
                if(e.clientX - left < 10 && e.clientY - top > 10 && e.clientY-top < parseInt($(".test1").height()) - 10) {
                    $(".test1").css("cursor","w-resize");
                    $(".test1").mousedown(function(e) {
                        var ismove = true;
                        var x = e.pageX - $(".test1").offset().left;
                        var w = e.pageX + parseInt($(".test1").css("width"));
                        $(document).mousemove(function(e) {
                            if(ismove) {
                                $(".test1").css({"width":w - e.pageX, "left":e.pageX - x});
                            }
                        }).mouseup(function() {
                            ismove = false;
                        });
                    });
                }
            });

；原文链接：https://blog.csdn.net/As_zyh/article/details/115529935
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！

上一篇：JAVAscript中的this指向和this指向的修改 下一篇：前端项目性能优化记录~

随机推荐

TeLOS Linux，基于 Debian 的全新 Linux

Linux 发行版的爱好者们又有全新的 Linux 可以体验了，日前一款名为 TeLOS 的 Li...
正确使用HTML title属性的一些建议

如果你想对使用手机，平板电脑和辅助技术的用户隐藏某些内容，而只对键盘用户显...
ASP Eval、Execute、ExecuteGlobal区别分

Eval 计算一个表达式的值并返回结果。语法：[result = ]eval_r(expression_r) e...
RSS的语言编码大全

Afrikaans:af Albanian:sq Basque:eu Belarusian:be Bulgarian:bg Catalan:ca Ch...
从生命周期的角度来规划数据库运维体系

最近在和团队规划OKR目标的时候，我们讨论了很多问题，我先抛砖引玉，列举了一些...
架构可视化支撑系统演进探索

本文分享自华为云社区《架构可视化支撑系统演进探索》原文作者无名小溪。随着...
12CR2 RAC安装避坑指南（Redhat7）

一、导读本文主要介绍Redhat7.6系统安装oracle 12201版本RAC的一些坑以及避坑方...
数据库：分享四个实用的SQL Server脚本函

今天给大家分享四个在实际开发中，比较实用的SQL Server脚本函数，希望对大家能...
RabbitMQ简介以及使用场景

一. RabbitMQ 简介 MQ全称为Message Queue, 消息队列（MQ）是一种应用程序对应用...
Ajax调用restful接口传送Json格式数据的

ajax传送json格式数据，关键是指定contentType，data要是json格式如果是restful...

jQuery实现鼠标拖动div改变位置、大小

推荐图文

比较全面的C 、Java、JavaScript中的正则表达式详解

python笔记整理

HTML 提高页面加载速度的方法

正则表达式[\s\S]与[\w\W] 什么意思

将Windows作为编程开发的主力

Linux 基金会宣布 Rend-o-matic 加入 Call for Code

随机推荐

TeLOS Linux，基于 Debian 的全新 Linux

正确使用HTML title属性的一些建议

ASP Eval、Execute、ExecuteGlobal区别分

RSS的语言编码大全

从生命周期的角度来规划数据库运维体系

架构可视化支撑系统演进探索

12CR2 RAC安装避坑指南（Redhat7）

数据库：分享四个实用的SQL Server脚本函

RabbitMQ简介以及使用场景

Ajax调用restful接口传送Json格式数据的

关于我们