首页 > 网站 > WEB开发 > 正文

jQuery鼠标拖曳改变div大小(模拟textarea右下角拖曳)

2024-04-27 14:20:39
字体:
来源:转载
供稿:网友

jQuery鼠标拖曳改变div大小(模拟textarea右下角拖曳)

            jQuery.fn.extend({              drag: function() {                $(document).off("mouseup.drag").on("mouseup.drag",function(){                    $(document).off("mousemove.drag");                });                return this.each(function() {                    $(this).CSS("position",($(this).css("position")!="static"||"relative"))                           .append($('<div class="dragbottom" style="bottom: 1px;right: 1px;cursor: nw-resize;position: absolute;background-image: url(/'http://files.jb51.net/file_images/200908/103419495.p.gif/');background-position: -42px -10px;width: 10px;height: 10px;font-size: 0;"></div>')                                .off("mousedown.drag")                                .on("mousedown.drag",function(event){                                    event.stopPRopagation();                                    var $parent = $(this).parent();                                    $(document).off("mousemove.drag").on("mousemove.drag",function(e){                                        $parent.width(e.pageX-$parent.offset().left+2);                                        $parent.height(e.pageY-$parent.offset().top+2);                                    })                                })                        );                                    });              }            });

用法

$("div").drag();

理论上table form等非输入框都可以使用


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表