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在一段文字中的光标处插入其他文字
Aug 26 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
js实现div色块碰撞
Jan 16 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 strtr() 函数使用说明
2008/11/21 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python基础教程之常用运算符
2014/08/29 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
python妹子图简单爬虫实例
2015/07/07 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
python实现kmp算法的实例代码
2019/04/03 Python
python取余运算符知识点详解
2019/06/27 Python
python迭代器常见用法实例分析
2019/11/22 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
Python如何使用input函数获取输入
2020/08/06 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
污水厂厂长岗位职责
2014/01/04 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
如何计划开一家便利店?
2019/07/31 职场文书