iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jQuery实现鼠标拖动div改变位置、大小的实践
  • 139
分享到

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

2024-04-02 19:04:59 139人浏览 泡泡鱼
摘要

       实现类似windows窗体的效果,在中间拖动改变div位置,在边缘拖动改变div大小,鼠标在相应的

       实现类似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;
                        });
                    });
                }
            });

到此这篇关于Jquery实现鼠标拖动div改变位置、大小的实践的文章就介绍到这了,更多相关jQuery 鼠标拖动div内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: jQuery实现鼠标拖动div改变位置、大小的实践

本文链接: https://www.lsjlt.com/news/123241.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jQuery实现鼠标拖动div改变位置、大小的实践
           实现类似windows窗体的效果,在中间拖动改变div位置,在边缘拖动改变div大小,鼠标在相应的...
    99+
    2024-04-02
  • jQuery实现鼠标拖动div改变位置、大小的操作
    本篇内容主要讲解“jQuery实现鼠标拖动div改变位置、大小的操作”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jQuery实现鼠标拖动div改变位置、大小的操作”吧!  ...
    99+
    2023-06-14
  • 如何实现鼠标拖动改变DIV等网页元素的大小
    这篇文章主要介绍如何实现鼠标拖动改变DIV等网页元素的大小,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.初次实现1.1 html代码<html xmlns=&qu...
    99+
    2024-04-02
  • jquery如何拖动改变div大小
    这篇文章将为大家详细讲解有关jquery如何拖动改变div大小,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下<html>  <he...
    99+
    2024-04-02
  • JavaScript实现div的鼠标拖拽效果
    本文实例为大家分享了JavaScript实现div鼠标拖拽效果的具体代码,供大家参考,具体内容如下 实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新d...
    99+
    2024-04-02
  • jQuery如何实现div跟随鼠标移动
    小编给大家分享一下jQuery如何实现div跟随鼠标移动,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置:用jQuery...
    99+
    2024-04-02
  • 利用JavaScript怎么实现一个拖拽鼠标调整div大小的功能
    本篇文章为大家展示了利用JavaScript怎么实现一个拖拽鼠标调整div大小的功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Java的特点有哪些Java的特点有哪些1.Java语言作为静态面向...
    99+
    2023-06-07
  • 怎么用JavaScript实现div的鼠标拖拽效果
    这篇文章主要介绍“怎么用JavaScript实现div的鼠标拖拽效果”,在日常操作中,相信很多人在怎么用JavaScript实现div的鼠标拖拽效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用Java...
    99+
    2023-06-25
  • jquery如何实现鼠标经过改变背景色
    今天小编给大家分享一下jquery如何实现鼠标经过改变背景色的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一...
    99+
    2024-04-02
  • vue实现拖动左侧导航栏变大变小
    本文实例为大家分享了vue实现拖动左侧导航栏变大变小的具体代码,供大家参考,具体内容如下 <template>   <div>     <div cl...
    99+
    2024-04-02
  • vue实现可拖拽div大小的方法
    下面看下vue中可拖拽div大小的方法。 可封装为全局方法在项目中所需要地方直接调用(mixins) 方法: 参数: 1.allBox:最外层第div class;2.leftBox...
    99+
    2024-04-02
  • css怎么实现随鼠标移动div渐变色效果
    这篇文章主要讲解了“css怎么实现随鼠标移动div渐变色效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css怎么实现随鼠标移动div渐变色效果”吧!HT...
    99+
    2024-04-02
  • javascript拖曳互换div的位置实现示例
    1 实现原理 利用dom元素的dragstart/ondragover/ondrop事件完成,在拖曳开始的时候获取到拖曳元素,然后允许拖动,最后鼠标抬起后放到新的位置;这里用到了ev...
    99+
    2024-04-02
  • vue如何实现拖动左侧导航栏变大变小
    这篇文章给大家分享的是有关vue如何实现拖动左侧导航栏变大变小的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下<template>  <div> &...
    99+
    2023-06-29
  • 纯CSS怎样实现左右拖拽改变布局大小
    这篇文章将为大家详细讲解有关纯CSS怎样实现左右拖拽改变布局大小,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScri...
    99+
    2023-06-08
  • css如何实现鼠标经过图片超链接时改变图片的大小
    小编给大家分享一下css如何实现鼠标经过图片超链接时改变图片的大小,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!鼠标经过时图片超链接改变的办法:代码如下:a:hover img{ height:&nbs...
    99+
    2023-06-08
  • JQuery实现点击div以外的位置隐藏该div窗口
    jquery实现鼠标点击div外的地方div窗口隐藏消失的复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra...
    99+
    2022-11-15
    点击div以外 隐藏该div
  • css实现鼠标经过样式改变的方法
    这篇文章主要介绍了css实现鼠标经过样式改变的方法,具有一定借鉴价值,需要的朋友可以参考下。下面就和我一起来看看吧。什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种...
    99+
    2023-06-14
  • jQuery鼠标移动图片上实现放大效果的示例分析
    小编给大家分享一下jQuery鼠标移动图片上实现放大效果的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!首先界面上要有图...
    99+
    2024-04-02
  • canvas如何实现小球和鼠标的互动
    小编给大家分享一下canvas如何实现小球和鼠标的互动,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!<!DOCTYPE html><html ><head&g...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作