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 相关文章推荐
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
js比较日期大小的方法
May 12 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
vue实现移动端图片上传功能
Dec 23 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
生成sessionid和随机密码的例子
2006/10/09 PHP
用mysql内存表来代替php session的类
2009/02/01 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python妹子图简单爬虫实例
2015/07/07 Python
python 简单的多线程链接实现代码
2016/08/28 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
法学专业自我鉴定
2014/02/05 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
学校节能减排倡议书
2014/05/16 职场文书
军训口号
2014/06/13 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
个人工作表现自我评价
2015/03/06 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
教师节主题班会方案
2015/08/17 职场文书
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android
python处理json数据文件
2022/04/11 Python