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 isArray 数组类型检测函数
Oct 08 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
Vue使用NPM方式搭建项目
Oct 25 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
我的论坛源代码(九)
2006/10/09 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
Python3生成手写体数字方法
2018/01/30 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
编程输出如下图形
2013/11/24 面试题
个人自我剖析材料
2014/02/07 职场文书
程序员求职信
2014/04/16 职场文书
银行求职自荐信
2014/06/30 职场文书
人力资源管理求职信
2014/08/07 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书