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> 

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