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

欧阳元魁

2023-03-14

本文向大家介绍jQuery拖拽通过八个点改变div大小，包括了jQuery拖拽通过八个点改变div大小的使用技巧和注意事项，需要的朋友参考一下

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。

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

相关阅读

相关文章

相关问答

相关工具

相关文档