该插件乃本博客作者所写，目的在于提升作者的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. WPF 创建自定义窗体

    在前面的一篇博客"WPF 自定义Metro Style窗体",展示了如何创建一个类似于Metro Style的Window,并在程序中使用.但是这个窗体不能够自由的改变大小.今天的 ...

  2. C专家编程cdecl

    理解所有分析过程的代码段 Page71(中文版) 你可以轻松地编写一个能够分析C语言的声明并把他们翻译成通俗语言的程序.事实上,为什么不?C语言声明的基本形式已经描述清楚.我们所需要的只是编写一段能够 ...

  3. unfortunately launcher has stopped

    设定虚拟机的配置.

  4. 安装pyspider

    费了三个小时,换了很多版本的Python pip lxml,最终选择安装anaconda2 非常顺利 运行pyspider后localhost:500正常显示 开森

  5. 关于移动端1px边框问题

    <div class="z_nei_list"> <div class="z_name_left font-size3">身份证号:&l ...

  6. 汇编学习（六）——代码转换程序

    (一)逻辑运算指令 一.双操作数逻辑运算指令 1.指令格式: AND dst,src ; "与"运算, OR dst,src ; "或"运算 XOR dst,s ...

  7. C++的模板特化 和 STL中iterator_traits模板的偏特化

    C++中有类模板和函数模板,它们的定义如下所示: 类模板: template<class T1,class T2> class C { //... }; 函数模板: template< ...

  8. sql修改约束语法练习

    --以系统管理员身份登录到SQL Server服务器,并使用T-SQL语句实现以下操作:--1. 将stu数据库中student表的sno定义为主键:alter table [student] add ...

  9. EL表达式详解及应用实例

    1. EL是JSP内置的表达式语言! * jsp2.0开始,不让再使用java脚本,而是使用el表达式和动态标签来替代java脚本! * EL替代的是<%= ... %>,也就是说,EL只 ...

  10. Java Math floor round ceil 函数

    public final class Math extends Object public static double floor(double a) public static long round ...