该插件乃本博客作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。

此插件旨在实现目前较为流行的拖拽改变元素大小的效果，您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高。整体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

*{margin:0;padding:0;}

.box{position:absolute;left:100px;top:100px;border:1px solid #eee;width:150px;height:150px;padding:10px;cursor:move;}

.drag{position:absolute;bottom:3px;right:3px;display:block;width:7px;height:7px;background:url(scale.png) no-repeat}

</style>

<script type="text/javascript" src="../test/jquery-1.7.1.js"></script>

<script type="text/javascript" src="jquery.resizable.js"></script>

</head>

<body>

<div class="box">拖拽我吧！<span class="drag"></span></div>

<script>

$(function(){

    $(".drag").resizable({

        minW : 150,

        minH : 150,

        maxW : 500,

        maxH : 500,

        });

    })

</script>

</body>

</html>

插件 jquery.dragscale.js 代码：

/*

*resizable 0.1

*Copyright (c) 2015 小坏 http://tnnyang.cnblogs.com

*Dependenc jquery-1.7.1.js

*/

;(function(a){

    a.fn.resizable = function(options){

        var defaults = {   //默认参数

            minW : 150,

            minH : 150,

            maxW : 500,

            maxH : 500,

            }

        var opts = a.extend(defaults, options);

        this.each(function(){

            var obj = a(this);

            obj.mousedown(function(e){

                var e = e || event;    //区分IE和其他浏览器事件对象

                var x = e.pageX - obj.position().left;    //获取鼠标距离匹配元素的父元素左侧的距离

                var y = e.pageY - obj.position().top;     //获取鼠标距离匹配元素的父元素顶端的距离

                $(document).mousemove(function(e){

                    var e = e || event;

                    var _x = e.pageX - x;        //动态获取匹配元素距离其父元素左侧的宽度

                    var _y = e.pageY - y;

                    _x = _x < opts.minW ? opts.minW : _x;      //保证匹配元素的最小宽度为150px

                    _x = _x > opts.maxW ? opts.maxW : _x;    //保证匹配元素的最大宽度为500px

                    _y = _y < opts.minH ? opts.minH : _y;

                    _y = _y > opts.maxH ? opts.maxH : _y;

                    obj.parent().css({width:_x,height:_y});

                }).mouseup(function(){

                    $(this).unbind("mousemove");  //当鼠标抬起  删除移动事件   匹配元素宽高变化停止

                    });

                });

            })

        }

    })(jQuery);

点击下载拖拽改变元素大小的DEMO

jquery插件之拖拽改变元素大小的更多相关文章

  1. JavaScript动画-拖拽改变元素大小

    ▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...

  2. javascript动画系列第四篇——拖拽改变元素大小

    × 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...

  3. jQuery拖拽改变元素大小

    一个非常简单的例子,体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/29.htm 以下是完整代码,保存到HTML文件打开也可以体验效果. <!DOCTY ...

  4. JQuery拖拽改变元素的尺寸

    "元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top.left.width.height 的运用,相对实现起来也非常容 ...

  5. jquery插件-自由拖拽

    最近工作不是很忙,学习之余想整理一些代码出来,首先想到的就是是js拖拽. 两年前去某公司面试的时候,曾经被问过这个问题,如何在页面上拖放元素,尽管现在看起来很简单,但当时的我半点思路都没有,面试想当然 ...

  6. jQuery插件（拖拽）

    拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). ...

  7. 通过Ztree生成页面html元素Dom树,以及拖拽改变元素的位置

    zTree 是一款依靠 jQuery 实现的多功能 "树插件",http://www.treejs.cn/v3/main.php#_zTreeInfo,功能强大,不多赘述. 下面我 ...

  8. jquery插件之拖拽

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可 ...

  9. Winform拖拽改变无边框窗体大小

    大家在进行Winform开发过程中,很容易就可以完成一个窗口的布局工作,但现在的软件界面美化效果一个比一个好,很多软件都是无边框的,于是乎,你是不是也感叹:winform的带边框的窗体如此丑陋,我一定 ...

随机推荐

  1. 并发异步处理队列 .NET 4.5+

    namespace Test { using System; using System.Threading; using System.Threading.Tasks; using Microshao ...

  2. windowsapi

    内核相关的在:kernel.dll,提供内存管理.进程管理.进程调度.线程管理等等用户相关的在:user32.dll,提供执行用户界面相关的接口界面相关的在:gdi32.dll,提供画图相关的接口

  3. 【项目总结】之——导出Excel

    近来接手的项目,有几个很值得分享的东西.经过自己的不懈实践,总结,分享给大家,希望能对大家的学习有点帮助. 本次探讨的是mvc框架之中的一种导出方法,导出excel. 先让大家看一下啊我们的view界 ...

  4. Linux使用jstat命令查看jvm的GC情况

    Linux使用jstat命令查看jvm的GC情况 http://www.open-open.com/lib/view/open1390916852007.html http://www.aiuxian ...

  5. strcmp函数的使用

    Action() { /*********************************   * Author:旺仔   * object:strcmp   * date:2015-12-09    ...

  6. 一个android样本的过保护

    前段时间处理一个android样本,样本本身作用不大,但是加了保护,遂做一个过保护的记录 通过dex2jar将dex转为jar文件的时候发现无法成功,通过抛出的异常可知,此处MainActivity: ...

  7. DSP using Matlab 书内练习Example 2.1

    先上代码,后出结果图. a. n = [-5:5]; x=2*impseq(-2,-5,5) - impseq(4,-5,5); set(gcf,'Color',[1,1,1]) % 改变坐标外围背景 ...

  8. shell-bash学习04读取输入、分隔符、流程控制

    读入输出 输入通常是通过stdin或参数传递给命令; 输出出现在stderr或stdout; 管道,过滤器,管道操作符: cmd1 | cmd2 | cmd3; //最后还有输出 ls | cat - ...

  9. SSH建立连接的过程

    1.     服务器建立公钥档: 每一次启动 sshd 服务时,该服务会主动去找 /etc/ssh/ssh_host* 的档案,若刚刚安装完ssh软件时,由于没有这些公钥档案,通过/etc/init. ...

  10. #ASP.NET Core 1.0 Key Features

    Cross platform support and flexible runtime engine(跨平台支持和灵活的运行时引擎) ASP.NET Core 1.0 offers support f ...