jQuery拖拽通过八个点改变div大小


Posted in Javascript onNovember 29, 2020

jQuery拖拽通过八个点改变div大小,供大家参考,具体内容如下

js:

(function($) { 
 
 /** 
 * 默认参数 
 */ 
 var defaultOpts = { 
 stage: document, //舞台 
 item: 'resize-item', //可缩放的类名 
 }; 
 
 /** 
 * 定义类 
 */ 
 var ZResize = function(options) { 
 this.options = $.extend({}, defaultOpts, options); 
 this.init(); 
 } 
 
 ZResize.prototype = { 
 init: function() { 
  this.initResizeBox(); 
 }, 
 /** 
  * 初始化拖拽item 
  */ 
 initResizeBox: function() { 
  var self = this; 
  $(self.options.item).each(function () { 
  //创建面板 
  var width = $(this).width(); 
  var height = $(this).height(); 
  var resizePanel = $('<div class"resize-panel"></div>'); 
  resizePanel.css({ 
   width: width, 
   height: height, 
   top: 0, 
   left: 0, 
   position: 'absolute', 
   'background-color': 'rgba(0,0,0,0.5)', 
   cursor: 'move', 
   display: 'none' 
  }); 
  self.appendHandler(resizePanel, $(this)); 
  /** 
   * 创建控制点 
   */ 
  var n = $('<div class="n"></div>');//北 
  var s = $('<div class="s"></div>');//南 
  var w = $('<div class="w"></div>');//西 
  var e = $('<div class="e"></div>');//东 
  var ne = $('<div class="ne"></div>');//东北 
  var nw = $('<div class="nw"></div>');//西北 
  var se = $('<div class="se"></div>');//东南 
  var sw = $('<div class="sw"></div>');//西南 
 
  //添加公共样式 
  self.addHandlerCss([n, s, w, e, ne, nw, se, sw]); 
  //添加各自样式 
  n.css({ 
   'top': '-4px', 
   'margin-left': '-4px', 
   'left': '50%', 
   'cursor': 'n-resize' 
  }); 
  s.css({ 
   'bottom': '-4px', 
   'margin-left': '-4px', 
   'left': '50%', 
   'cursor': 's-resize' 
  }); 
  e.css({ 
   'top': '50%', 
   'margin-top': '-4px', 
   'right': '-4px', 
   'cursor': 'e-resize' 
  }); 
  w.css({ 
   'top': '50%', 
   'margin-top': '-4px', 
   'left': '-4px', 
   'cursor': 'w-resize' 
  }); 
  ne.css({ 
   'top': '-4px', 
   'right': '-4px', 
   'cursor': 'ne-resize' 
  }); 
  nw.css({ 
   top: '-4px', 
   'left': '-4px', 
   'cursor': 'nw-resize' 
  }); 
  se.css({ 
   'bottom': '-4px', 
   'right': '-4px', 
   'cursor': 'se-resize' 
  }); 
  sw.css({ 
   'bottom': '-4px', 
   'left': '-4px', 
   'cursor': 'sw-resize' 
  }); 
 
  // 添加项目 
  self.appendHandler([n, s, w, e, ne, nw, se, sw], resizePanel); 
   
  //绑定拖拽缩放事件 
  self.bindResizeEvent(resizePanel, $(this)); 
 
  //绑定触发事件 
  self.bindTrigger($(this)); 
  }); 
  self.bindHidePanel(); 
 }, 
 //控制点公共样式 
 addHandlerCss: function(els) { 
  for(var i = 0; i < els.length; i++) { 
  el = els[i]; 
  el.css({ 
   position: 'absolute', 
   width: '8px', 
   height: '8px', 
   background: '#ff6600', 
   margin: '0', 
   'border-radius': '2px', 
   border: '1px solid #dd5500', 
  }); 
  } 
 }, 
 /** 
  * 插入容器 
  */ 
 appendHandler: function(handlers, target) { 
  for(var i = 0; i < handlers.length; i++) { 
  el = handlers[i]; 
  target.append(el); 
  } 
 }, 
 /** 
  * 显示拖拽面板 
  */ 
 triggerResize: function(el) { 
  var self = this; 
  el.siblings(self.options.item).children('div').css({ 
  display: 'none' 
  }); 
  el.children('div').css({ 
  display: 'block' 
  }); 
 }, 
 /** 
  * 拖拽事件控制 包含8个缩放点 和一个拖拽位置 
  */ 
 bindResizeEvent: function(el) { 
 
  var self = this; 
  var ox = 0; //原始事件x位置 
  var oy = 0; //原始事件y位置 
  var ow = 0; //原始宽度 
  var oh = 0; //原始高度 
 
  var oleft = 0; //原始元素位置 
  var otop = 0; 
  var org = el.parent('div'); 
 
  //东 
  var emove = false; 
  el.on('mousedown','.e', function(e) { 
  ox = e.pageX;//原始x位置 
  ow = el.width(); 
  emove = true; 
  }); 
 
  //南 
  var smove = false; 
  el.on('mousedown','.s', function(e) { 
  oy = e.pageY;//原始x位置 
  oh = el.height(); 
  smove = true; 
  }); 
 
  //西 
  var wmove = false; 
  el.on('mousedown','.w', function(e) { 
  ox = e.pageX;//原始x位置 
  ow = el.width(); 
  wmove = true; 
  oleft = parseInt(org.css('left').replace('px', '')); 
  }); 
 
  //北 
  var nmove = false; 
  el.on('mousedown','.n', function(e) { 
  oy = e.pageY;//原始x位置 
  oh = el.height(); 
  nmove = true; 
  otop = parseInt(org.css('top').replace('px', '')); 
  }); 
 
  //东北 
  var nemove = false; 
  el.on('mousedown','.ne', function(e) { 
  ox = e.pageX;//原始x位置 
  oy = e.pageY; 
  ow = el.width(); 
  oh = el.height(); 
  nemove = true; 
  otop = parseInt(org.css('top').replace('px', '')); 
  }); 
 
  //西北 
  var nwmove = false; 
  el.on('mousedown','.nw', function(e) { 
  ox = e.pageX;//原始x位置 
  oy = e.pageY; 
  ow = el.width(); 
  oh = el.height(); 
  otop = parseInt(org.css('top').replace('px', '')); 
  oleft = parseInt(org.css('left').replace('px', '')); 
  nwmove = true; 
  }); 
 
  //东南 
  var semove = false; 
  el.on('mousedown','.se', function(e) { 
  ox = e.pageX;//原始x位置 
  oy = e.pageY; 
  ow = el.width(); 
  oh = el.height(); 
  semove = true; 
  }); 
 
  //西南 
  var swmove = false; 
  el.on('mousedown','.sw', function(e) { 
  ox = e.pageX;//原始x位置 
  oy = e.pageY; 
  ow = el.width(); 
  oh = el.height(); 
  swmove = true; 
  oleft = parseInt(org.css('left').replace('px', '')); 
  }); 
 
  //拖拽 
  var drag = false; 
  el.on('mousedown', function(e) { 
  ox = e.pageX;//原始x位置 
  oy = e.pageY; 
  otop = parseInt(org.css('top').replace('px', '')); 
  oleft = parseInt(org.css('left').replace('px', '')); 
  drag = true; 
  }); 
 
  $(self.options.stage).on('mousemove', function(e) { 
  if(emove) { 
   var x = (e.pageX - ox); 
   el.css({ 
   width: ow + x 
   }); 
   org.css({ 
   width: ow + x 
   }); 
  } else if(smove) { 
   var y = (e.pageY - oy); 
   el.css({ 
   height: oh + y 
   }); 
   org.css({ 
   height: oh + y 
   }); 
  } else if(wmove) { 
   var x = (e.pageX - ox); 
   el.css({ 
   width: ow - x, 
   // left: oleft + x 
   }); 
   org.css({ 
   width: ow - x, 
   left: oleft + x 
   }); 
  } else if(nmove) { 
   var y = (e.pageY - oy); 
   el.css({ 
   height: oh - y, 
   // top: otop + y 
   }); 
   org.css({ 
   height: oh - y, 
   top: otop + y 
   }); 
  } else if(nemove) { 
   var x = e.pageX - ox; 
   var y = e.pageY - oy; 
   el.css({ 
   height: oh - y, 
   // top: otop + y, 
   width: ow + x 
   }); 
   org.css({ 
   height: oh - y, 
   top: otop + y, 
   width: ow + x 
   }); 
  } else if(nwmove) { 
   var x = e.pageX - ox; 
   var y = e.pageY - oy; 
   el.css({ 
   height: oh - y, 
   // top: otop + y, 
   width: ow - x, 
   // left: oleft + x 
   }); 
   org.css({ 
   height: oh - y, 
   top: otop + y, 
   width: ow - x, 
   left: oleft + x 
   }); 
  } else if(semove) { 
   var x = e.pageX - ox; 
   var y = e.pageY - oy; 
   el.css({ 
   width: ow + x, 
   height: oh + y 
   }); 
   org.css({ 
   width: ow + x, 
   height: oh + y 
   }); 
  } else if(swmove) { 
   var x = e.pageX - ox; 
   var y = e.pageY - oy; 
   el.css({ 
   width: ow - x, 
   // left: oleft + x, 
   height: oh + y 
   }); 
   org.css({ 
   width: ow - x, 
   left: oleft + x, 
   height: oh + y 
   }); 
  } else if(drag) { 
   var x = e.pageX - ox; 
   var y = e.pageY - oy; 
   org.css({ 
   left: oleft + x, 
   top: otop + y 
   }); 
  } 
  }).on('mouseup', function(e) { 
  emove = false; 
  smove = false; 
  wmove = false; 
  nmove = false; 
  nemove = false; 
  nwmove = false; 
  swmove = false; 
  semove = false; 
  drag = false; 
  }); 
 }, 
 /** 
  * 点击item显示拖拽面板 
  */ 
 bindTrigger: function(el) { 
  var self = this; 
  el.on('click', function(e) { 
  e.stopPropagation(); 
  self.triggerResize(el); 
  }); 
 }, 
 /** 
  * 点击舞台空闲区域 隐藏缩放面板 
  */ 
 bindHidePanel: function(el) { 
  var stage = this.options.stage; 
  var item = this.options.item; 
  $(stage).bind('click', function() { 
  $(item).children('div').css({ 
   display: 'none' 
  }); 
  }) 
 } 
 } 
 
 window.ZResize = ZResize; 
 
})(jQuery);

html:

<!doctype html> 
<html> 
 
<head> 
 <meta charset="utf-8"> 
 <title>jQuery拖拽放大缩小插件idrag</title> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 <style type="text/css"> 
 .item1 { 
 width: 405px; 
 height: 291px; 
 cursor: move; 
 position: absolute; 
 top: 30px; 
 left: 30px; 
 background-color: #FFF; 
 border: 1px solid #CCCCCC; 
 -webkit-box-shadow: 10px 10px 25px #ccc; 
 -moz-box-shadow: 10px 10px 25px #ccc; 
 box-shadow: 10px 10px 25px #ccc; 
 } 
 
 .item2 { 
 width: 200px; 
 height: 100px; 
 cursor: move; 
 position: absolute; 
 top: 400px; 
 left: 100px; 
 background-color: #FFF; 
 border: 1px solid #CCCCCC; 
 -webkit-box-shadow: 10px 10px 25px #ccc; 
 -moz-box-shadow: 10px 10px 25px #ccc; 
 box-shadow: 10px 10px 25px #ccc; 
 line-height: 100px; 
 text-align: center; 
 } 
 
 body { 
 background-color: #F3F3F3; 
 } 
 </style> 
</head> 
 
<body> 
 <div id="mydiv" style="width:800px; height:800px; border-style:solid"> 
 <div id="div1" class="resize-item item1"> 
  <img src="images/dog.png" width="100%" height="100%"> 
 </div> 
 <div class="resize-item item2"> 
  你是我的小小狗 
 </div> 
 </div> 
 <script src="jquery.min.js"></script> 
 <script type="text/javascript" src='jquery.ZResize.js'></script> 
 <script type="text/javascript"> 
 new ZResize({ 
  stage: "#mydiv", //舞台 
  item: '#div1', //可缩放的类名 
 }); 
 </script> 
</body> 
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 图像动画的小demo
May 23 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 Javascript
jQuery网页定位导航特效实现方法
Dec 19 #Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 #Javascript
详解jQuery lazyload 懒加载
Dec 19 #Javascript
JS实现滑动门效果的方法详解
Dec 19 #Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 #Javascript
简单理解js的冒泡排序
Dec 19 #Javascript
JS瀑布流实现方法实例分析
Dec 19 #Javascript
You might like
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
php魔术变量用法实例详解
2014/11/13 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
PHP设置进度条的方法
2015/07/08 PHP
微信支付开发订单查询实例
2016/07/12 PHP
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
py2exe 编译ico图标的代码
2013/03/08 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
python实现批量图片格式转换
2020/06/16 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
django fernet fields字段加密实践详解
2019/08/12 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
html5唤起app的方法
2017/11/30 HTML / CSS
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
男方父母婚礼答谢词
2014/01/25 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
农业项目建议书
2014/08/25 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
python+opencv实现目标跟踪过程
2022/06/21 Python