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 相关文章推荐
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 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网站备份程序代码分享
2011/06/10 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
yii操作session实例简介
2014/07/31 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
JS编程小常识很有用
2012/11/26 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
Python实现批量读取word中表格信息的方法
2015/07/30 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
Python用户自定义异常的实现
2020/12/25 Python
Python脚本调试工具安装过程
2021/01/11 Python
人事档案接收函
2014/01/12 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
旷课检讨书1000字
2014/02/14 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
中考标语大全
2014/06/05 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
个人先进事迹材料
2014/12/29 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
以下牛机,你有几个
2022/04/05 无线电