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中单选框和复选框获取值的方式
Nov 06 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
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
phpBB BBcode处理的漏洞
2006/10/09 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
简化Python的Django框架代码的一些示例
2015/04/20 Python
python生成IP段的方法
2015/07/07 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
生产现场工艺工程师岗位职责
2013/11/28 职场文书
中学生运动会入场词
2014/02/12 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
银行服务理念口号
2015/12/25 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书