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 相关文章推荐
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
原生JS实现层叠轮播图
May 17 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
手写实现JS中的new
Nov 07 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 Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
Python中扩展包的安装方法详解
2017/06/14 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
python单例模式的多种实现方法
2019/07/26 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
python实现126邮箱发送邮件
2020/05/20 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
小学运动会入场式解说词
2014/02/18 职场文书
户外活动策划方案
2014/03/12 职场文书
团代会主持词
2014/04/02 职场文书
体育之星事迹材料
2014/05/11 职场文书
会计试用期自我评价
2014/09/19 职场文书
护士年终考核评语
2014/12/31 职场文书
区域经理岗位职责
2015/02/02 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
员工福利申请报告
2015/05/15 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript