当前位置:首页 > 编程教程 > jQuery技术文章 > jquery拖动改变div大小

如何使用jquery拖拽改变div大小

  • 发布时间:
  • 作者:码农之家
  • 点击:59

这篇文章主要知识点是关于jquery、改变div、div、jQuery拖拽通过八个点改变div大小 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践
  • 类型:前端开发大小:167.1 MB格式:PDF作者:阮晓龙
立即下载

jquery拖动改变div大小

本文实例为大家分享了jquery拖动改变div大小的具体代码,供大家参考,具体内容如下

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery 版“元素拖拽改变大小”原型 </title> 
<script type="text/javascript" src="../js/jquery-1.7.1.js"></script> 
<script type="text/javascript"> 
  /* 
   * jQuery.Resize by wuxinxi007 
   * Date: 2011-5-14 
   * blog : http://wuxinxi007.cnblogs.com/ 
   */ 
  $(function(){ 
    //绑定需要拖拽改变大小的元素对象 
    bindResize(document.getElementById('test')); 
  }); 
  
  function bindResize(el){ 
    //初始化参数 
    var els = el.style, 
      //鼠标的 X 和 Y 轴坐标 
      x = y = 0; 
    //邪恶的食指 
    $(el).mousedown(function(e){ 
      //按下元素后,计算当前鼠标与对象计算后的坐标 
      x = e.clientX - el.offsetWidth, 
      y = e.clientY - el.offsetHeight; 
      //在支持 setCapture 做些东东 
      el.setCapture ? ( 
        //捕捉焦点 
        el.setCapture(), 
        //设置事件 
        el.onmousemove = function(ev){ 
          mouseMove(ev || event) 
        }, 
        el.onmouseup = mouseUp 
      ) : ( 
        //绑定事件 
        $(document).bind("mousemove",mouseMove).bind("mouseup",mouseUp) 
      ) 
      //防止默认事件发生 
      e.preventDefault() 
    }); 
    //移动事件 
    function mouseMove(e){ 
      //宇宙超级无敌运算中... 
      els.width = e.clientX - x + 'px', 
      els.height = e.clientY - y + 'px' 
    } 
    //停止事件 
    function mouseUp(){ 
      //在支持 releaseCapture 做些东东 
      el.releaseCapture ? ( 
        //释放焦点 
        el.releaseCapture(), 
        //移除事件 
        el.onmousemove = el.onmouseup = null 
      ) : ( 
        //卸载事件 
        $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp) 
      ) 
    } 
  } 
</script> 
<style type="text/css"> 
#test{ 
  position:absolute; 
  top:0;left:0; 
  width:200px; 
  height:100px; 
  background:#f1f1f1; 
  text-align:center; 
  line-height:100px; 
  border:1px solid #CCC; 
  cursor:move; 
} 
</style> 
</head> 

<body> 
  <div id="test">dgdg</div> 
</body> 
</html>

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

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" > 
  <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> 

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jquery拖拽改变div 相关电子书
学习笔记
网友NO.543975

基于jquery的滚动条滚动固定div(附演示下载)

例如:淘宝商品详情里,滚动条往下来拉的时候,商品详情和评价那个nav会固定,现在很多网站也都有这样类似的效果,现在流行这个么?元芳,你怎么看?我也在网上找了找代码,屡试不爽啊,很多代码乱且没用。于是乎,我自己写一个,代码非常之简单,只有10几行,但遗憾的是,不兼容IE6,如果谁有兼容IE6的例子,还请指教。 直接贴下代码吧。 !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" html head meta http-equiv="Content-Type" content="text/html; charset=gb2312" titledemo/title script src="jquery-1.4.1.min.js" type="text/javascript"/script script type="text/javascript" $(document).ready(function(){ var loaded = true; var top = $("#demo").offset().top; function Add_Data() { var scrolla=$(window).scrollTop(); var cha=parseInt(top)-parseInt( scrolla); if(loaded cha=0) { $("#demo").removeClass("demo2").addClass("demo1"); $……

网友NO.279715

巧用jquery解决下拉菜单被Div遮挡的相关问题

用jquery的hover事件,当鼠标移动到menu时,把遮挡下拉菜单的div设置为负值,鼠标离开时恢复正值, 代码如下: $("#menu").hover( function() { $(".divName").css("z-index", "-1"); }, function() { $(".divName").css("z-index", "0"); }); ……

网友NO.552049

jquery实现可拖动DIV自定义保存到数据的实例

看到一个不错的jquery插件,可拖动DIV,顺序可保存到数据库的一个实例:这里就以其中PHP实例简单说明一下: ?php //post到后台的数据 if ($_POST) { $ids = $_POST["ids"]; for ($idx = 0; $idx count($ids); $idx+=1) { $id = $ids[$idx]; $ordinal = $idx; //... } return; } ? !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head style type="text/css" body { font-family:Arial; font-size:12pt; padding:20px; width: 800px; margin:20px auto; border:solid 1px black; } h1 { font-size:16pt; } h2 { font-size:13pt; } ul { width:350px; list-style-type: none; margin:0px; padding:0px; } li { float:left; padding:5px; width:100px; height:100px; } li div { width:90px; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px; } .placeHolder div { background-color:white!important; border:dashed 1px gray !important; } /……

网友NO.376822

jQuery除指定区域外点击任何地方隐藏DIV功能

具体代码如下所示: $('body').click(function(e) { var target = $(e.target); // 如果#overlay或者#btn下面还有子元素,可使用 // !target.is('#btn *') !target.is('#overlay *') if(!target.is('#btn') !target.is('#overlay')) { if ( $('#overlay').is(':visible') ) { $('#overlay').hide(); } }}); 或者 $('body').click(function(e) { if(e.target.id != 'btn' e.target.id != 'overlay') if ( $('#overlay').is(':visible') ) { $('#overlay').hide(); }}) PS:下面在接着看一段代码jquery 点击除本身外其他地方隐藏 $("#test").click(function(e) { e?e.stopPropagation():event.cancelBubble = true; }); $(document).click(function() { $("#test").fadeOut(); pre name="code" class="html"e?e.stopPropagation():event.cancelBubble = true; 为阻止冒泡事件/pre }); pre/pre br link rel="stylesheet" href="http://static.blog.csdn.net/public/res-min/markdown_views.css?v=2.0" 总结 以上所述是小编给大家介绍的jQuery除指定区域外点击任何地方隐藏DIV,希望对大……

网友NO.919338

基于jQuery实现Div窗口震动特效代码-代码简单

这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8、360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗等。 效果图如下: 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / titlejquery窗口震动特效/title script type="text/javascript" src="//www.jb51.net/ajaxjs/jquery-1.6.2.min.js"/script script type="text/javascript" ;(function($){ var element = {}; $.fn.jshaker = function(){ element = $(this); element.css(position, relative); element.find(*).each(function(i, el){ $(el).css(position, relative); }); var iFunc = function(){ $.fn.jshaker.animate($(element)); }; setTimeout(iFunc, 50); }; $.fn.jshaker.animate = function(el){ $.fn.jshaker.shake(el); el.find(*).each(function(i, el){ $.fn.jshaker.shake(el); })……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com