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

时间:2022-02-09 20:42:58
            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等非输入框都可以使用