jQuery实现鼠标拖动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内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
• jquery div拖动效果示例代码
• jQuery拖动div、移动div、弹出层实现原理及示例
• jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
• jquery拖动改变div大小
• 使用jQuery的easydrag插件实现可拖动的DIV弹出框
• jquery实现可拖动DIV自定义保存到数据的实例
• jQuery实现Div拖动+键盘控制综合效果的方法

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！