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 preload&amp;lazy load
May 13 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
js模块加载方式浅析
Aug 12 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
javascript中如何判断类型汇总
May 14 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 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
PHP4在Windows2000下的安装
2006/10/09 PHP
dedecms系统常用术语汇总
2007/04/03 PHP
php 数组的创建、调用和更新实现代码
2009/03/09 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
使用javascript插入样式
2016/03/14 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
详解JavaScript的变量
2019/04/04 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
Python处理中文标点符号大集合
2018/05/14 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
python读写文件write和flush的实现方式
2020/02/21 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
浅析Python中字符串的intern机制
2020/10/03 Python
中国网上药店领导者:1药网
2017/02/16 全球购物
三八节主持词
2014/03/17 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
2016年党建工作简报
2015/11/26 职场文书