该插件乃本博客作者所写，目的在于提升作者的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. memcached的最佳实践方案

    基本问题 1.memcached的基本设置 1)启动Memcache的服务器端 # /usr/local/bin/memcached -d -m 10 -u root -l 192.168.0.200 ...

  2. VS2012 配置 OpenCV3.0

    VS2012 配置 opencv3.0,相比之前的版本,3.0的配置简单了好多. 通过配置属性文件,可以做到一次配置,重复使用! 根据文章的操作在 win7 64bit VS2012 下成功配置 op ...

  3. LeetCode39/40/22/77/17/401/78/51/46/47/79 11道回溯题（Backtracking）

    LeetCode 39 class Solution { public: void dfs(int dep, int maxDep, vector<int>& cand, int ...

  4. barabasilab-networkScience学习笔记6-evolving networks

    第一次接触复杂性科学是在一本叫think complexity的书上,Allen博士很好的讲述了数据结构与复杂性科学,barabasi是一个知名的复杂性网络科学家,barabasilab则是他所主导的 ...

  5. java集群技术(转)

    来源:http://blog.csdn.net/cdh1213/article/details/21443239 序言 越来越多的关键应用运行在J2EE(Java2, Enterprise Editi ...

  6. poj3186 Treats for the Cows(区间)

    题目链接:http://poj.org/problem?id=3186 题意:第一个数是N,接下来N个数,每次只能从队列的首或者尾取出元素. ans=每次取出的值*出列的序号.求ans的最大值. 样例 ...

  7. 解决js小数求和出现多位小数问题

    在小数相加时,可能会产生多个小数位.如下所示: var x=1+1;   //2 var x=1.20+1.11;   //2.31 var x=1.56+1.76;   //3.3200000000 ...

  8. thymeleaf 基本表达式

    Thymeleaf 基本表达式 如需了解thymeleaf以及thymeleaf整合spring,请参考<Thymeleaf模板引擎使用>.<Thymeleaf 集成spring&g ...

  9. TODO软件工程--如何预算项目的工期

    我的项目后台接口已经开发好,是前人留下的接口,现在只需要和前端联调,本以为后台的开发周期短,可以提早上线,可以因为旧接口不兼容新的要求 不得不重新写,造成了工期的延误. 如何计算一个工期被提上日程.

  10. WPF: 旋转Thumb后，DragDelta移动距离出错的解决

    当Thumb跟随Grid旋转90度后,拖拽控件时会飞掉. <Grid x:Name="gridMain" Width="100" Height=" ...