jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)


Posted in Javascript onFebruary 25, 2016

本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法。分享给大家供大家参考,具体如下:

该插件是文章作者所写,目的在于提升作者的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="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
*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);

完整实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
AngularJS上传文件的示例代码
Nov 10 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
微信小程序实现时间进度条功能
Nov 17 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 #Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 #Javascript
jquery zTree异步加载简单实例讲解
Feb 25 #Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 #Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 #Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 #Javascript
jquery ztree实现模糊搜索功能
Feb 25 #Javascript
You might like
深入php常用函数的使用汇总
2013/06/08 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
Yii2中datetime类的使用
2016/12/17 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
Vuex 入门教程
2018/01/10 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
Python如何实现动态数组
2019/11/02 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
秸秆管理实施方案
2014/03/15 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
中标通知书范本
2015/04/17 职场文书
工资证明格式模板
2015/06/12 职场文书
学习计划是什么
2019/04/30 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
python基础之文件操作
2021/10/24 Python