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 String.replace的妙用
Sep 08 Javascript
初识javascript 文档碎片
Jul 13 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
微信小程序 冒泡事件原理解析
Sep 27 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 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过滤危险html代码的函数
2008/07/22 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
Yii rules常用规则示例
2016/03/15 PHP
解析javascript 浏览器关闭事件
2013/07/08 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
javascript闭包入门示例
2014/04/30 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
自我评价格式
2014/01/06 职场文书
二年级语文教学反思
2014/02/02 职场文书
幼教求职信
2014/03/12 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
升旗仪式主持词
2014/03/19 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
北京故宫导游词
2015/01/31 职场文书
民政工作个人总结
2015/02/28 职场文书
防震减灾主题班会
2015/08/14 职场文书
教师远程研修感悟
2015/11/18 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS