该插件乃本博客作者所写，目的在于提升作者的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. hdu 4277 2012长春赛区网络赛 dfs+hashmap ***

    hashmap判重大法好 #include<cstdio> #include<iostream> #include<algorithm> #include<c ...

  2. [荐] jQuery取得select选择的文本与值

    csdn:http://blog.csdn.net/tiemufeng1122/article/details/44154571 jquery获取select选择的文本与值获取select :获取se ...

  3. POJ 1625 Censored!(AC自动机+DP+高精度)

    Censored! Time Limit: 5000MS   Memory Limit: 10000K Total Submissions: 6956   Accepted: 1887 Descrip ...

  4. python最简单的http服务器

    人生苦短,我用python 今天有个需求就是简单的把自己的图片通过web共享,自然就想起了使用服务器了,在python下使用一个简单的服务器是非常方便的,用到标准库里面的SimpleHTTPServe ...

  5. php echo return exit 区别

    echo.print().printf().sprintf().vardump().varexport():都可以输出内容到网页,但不退出函数或程序. return:返回并立即退出,函数级别. die ...

  6. Linux学习笔记(19) Linux服务管理

    1. 服务的分类 Linux服务可分为RPM包默认安装的服务和源码包安装的服务.前者可细分为独立的服务(直接作用于内存中)和基于xinetd服务.xinetd本身是独立的服务,其唯一的功能是管理其他服 ...

  7. 及其简短的Splay代码

    #include <stdio.h> #include <queue> #include <algorithm> #include <stdlib.h> ...

  8. ado.net增删改查练习

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  9. jQuery插件开发--（转）

    1,开始 可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字: jQuery.fn.myPlugin = function(){ //开始写你的代码吧! ...

  10. The Unique MST（次小生成树）

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 22335   Accepted: 7922 Description Give ...