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中的几个关键概念的理解-原型链的构建
May 12 Javascript
AngularJS语法详解
Jan 23 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
vue使用element-ui按需引入
May 20 Vue.js
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
PHP脚本的10个技巧(8)
2006/10/09 PHP
php中strtotime函数用法详解
2014/11/15 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
python爬虫之自制英汉字典
2019/06/24 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
本科毕业生的求职信范文
2013/11/20 职场文书
党员带头倡议书
2015/04/29 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书