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>

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

赞 (0)

相关推荐

  • javascript实现鼠标拖动改变层大小的方法

    本文实例讲述了javascript实现鼠标拖动改变层大小的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>拖动改变层的大小</title> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <style> { box-sizing: border-box; moz-b

  • js通过八个点 拖动改变div大小的实现方法

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Resize</title> <style type="text/css"> #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRigh

  • 可拖动可改变大小div的实现代码

    Dialog .dialogcontainter{height:400px; width:400px; border:1px solid #14495f; position:absolute; font-size:13px;} .dialogtitle{height:26px; width:auto; background-image:url('http://files.jb51.net/file_images/200908/103444839.p.gif');} .dialogtitleinf

  • 鼠标拖动改变DIV等网页元素的大小的实现方法

    鼠标拖动改变DIV等网页元素的大小的实现方法

    1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div change

  • jquery实现拖拽调整Div大小

    今天写了一天这个jquery插件: 可以实现对div进行拖拽来调整大小的功能. 复制代码 代码如下: (function ($) {     $.fn.dragDivResize = function () {         var deltaX, deltaY, _startX, _startY;         var resizeW, resizeH;         var size = 20;         var minSize = 10;         var scroll

  • 利用JavaScript实现拖拽改变元素大小

    利用JavaScript实现拖拽改变元素大小

    大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当点击这个范围时表明我们想要改变它的大小 当我们点击方块的这些红色区域时,方快就知道我们想要改变它的大小 代码实现: // 获取event对象,兼容性写法 var ev = ev || event; // 鼠标按下时的位置 var mouseDownX = ev.clientX; var mouseDownY = ev.clientY; // 方块上下

  • jquery拖动改变div大小

    本文实例为大家分享了jquery拖动改变div大小的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery 版"元素拖拽改变大小"原型 </title> <script type="text/jav

  • 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.

  • jquery动态改变div宽度和高度

    完整代码: 复制代码 代码如下: <!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> <title>jque

  • 原生js和jQuery随意改变div属性style的名称和值

    一些简单的例子,用原生js和jQuery实现随意改变div属性,和重置.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>函数传参,改变Div任意属性的值</title> <style type="text/css"> body,p{margin:0;padding:0;} body{color:#3

  • jquery动态调整div大小使其宽度始终为浏览器宽度

    有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,不过我们也可以用jquery来实现. 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</title> <script src="jquery-1.11.1.min.js"><

  • 主页面中的两个iframe实现鼠标拖动改变其大小

    主页面中的两个iframe实现鼠标拖动改变其大小

    复制代码 代码如下: <%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm4.aspx.vb" Inherits="HIG_Receipt.WebForm4"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html

  • js实现的八点拖动修改div大小的代码

    Resize #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{ position:absolute;background:#C00;width:6px;height:6px;z-index:5;font-size:0;} #rLeftDown,#rRightUp{cursor:ne-resize;} #rRightDown,#rLeftUp{cursor:nw-resize;} #rRight,#rLeft

随机推荐