`
jackeysion
  • 浏览: 129280 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

拖动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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Dialog</title> 
<style type="text/css"><!-- 
.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');} 
.dialogtitleinfo{float:left;height:20px; margin-top:2px; margin-left:10px;line-height:20px; vertical-align:middle; color:#FFFFFF; font-weight:bold; } 
.dialogtitleico{float:right; height:20px; width:21px; margin-top:2px; margin-right:5px;text-align:center; line-height:20px; vertical-align:middle; background-image:url('http://files.jb51.net/file_images/200908/103419495.p.gif');background-position:-21px 0px} 
.dialogbody{ padding:10px; width:auto; background-color: #FFFFFF;} 
.dialogbottom{ 
bottom:1px; right:1px;cursor:nw-resize; 
position:absolute; 
background-image:url('http://files.jb51.net/file_images/200908/103419495.p.gif'); 
background-position:-42px -10px; 
width:10px; 
height:10px; 
font-size:0;} 
--></style><style type="text/css" bogus="1">.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');} 
.dialogtitleinfo{float:left;height:20px; margin-top:2px; margin-left:10px;line-height:20px; vertical-align:middle; color:#FFFFFF; font-weight:bold; } 
.dialogtitleico{float:right; height:20px; width:21px; margin-top:2px; margin-right:5px;text-align:center; line-height:20px; vertical-align:middle; background-image:url('http://files.jb51.net/file_images/200908/103419495.p.gif');background-position:-21px 0px} 
.dialogbody{ padding:10px; width:auto; background-color: #FFFFFF;} 
.dialogbottom{ 
bottom:1px; right:1px;cursor:nw-resize; 
position:absolute; 
background-image:url('http://files.jb51.net/file_images/200908/103419495.p.gif'); 
background-position:-42px -10px; 
width:10px; 
height:10px; 
font-size:0;}</style> 
</head> 
<body > 
<input value="创建" type="button" onclick="creat()" /> 
<div id='aa'></div> 
<script type="text/javascript"><!-- 
var z=1,i=1,left=10 
var isIE = (document.all) ? true : false; 

var $ = function (id) { 
return document.getElementById(id); 
}; 

var Extend = function(destination, source) { 
for (var property in source) { 
destination[property] = source[property]; 
} 
} 

var Bind = function(object, fun,args) { 
return function() { 
return fun.apply(object,args||[]); 
} 
} 

var BindAsEventListener = function(object, fun) { 
var args = Array.prototype.slice.call(arguments).slice(2); 
return function(event) { 
return fun.apply(object, [event || window.event].concat(args)); 
} 
} 

var CurrentStyle = function(element){ 
return element.currentStyle || document.defaultView.getComputedStyle(element, null); 
} 

function create(elm,parent,fn){var element = document.createElement(elm);fn&&fn(element); parent&&parent.appendChild(element);return element}; 
function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)}; 
function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)}; 

var Class = function(properties){ 
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; 
_class.prototype = properties; 
return _class; 
}; 

var Dialog = new Class({ 
options:{ 
Width : 400, 
Height : 400, 
Left : 100, 
Top : 100, 
Titleheight : 26, 
Minwidth : 200, 
Minheight : 200, 
CancelIco : true, 
ResizeIco : false, 
Info : "新闻标题", 
Content : "无内容", 
Zindex : 2 
}, 
initialize:function(options){ 
this._dragobj = null; 
this._resize = null; 
this._cancel = null; 
this._body = null; 
this._x = 0; 
this._y = 0; 
this._fM = BindAsEventListener(this, this.Move); 
this._fS = Bind(this, this.Stop); 
this._isdrag = null; 
this._Css = null; 
//////////////////////////////////////////////////////////////////////////////// 
this.Width = this.options.Width; 
this.Height = this.options.Height; 
this.Left = this.options.Left; 
this.Top = this.options.Top; 
this.CancelIco = this.options.CancelIco; 
this.Info = this.options.Info; 
this.Content = this.options.Content; 
this.Minwidth = this.options.Minwidth; 
this.Minheight = this.options.Minheight; 
this.Titleheight= this.options.Titleheight; 
this.Zindex = this.options.Zindex; 
Extend(this,options); 
Dialog.Zindex = this.Zindex 
//////////////////////////////////////////////////////////////////////////////// 构造dialog 
var obj = ['dialogcontainter','dialogtitle','dialogtitleinfo','dialogtitleico','dialogbody','dialogbottom']; 
for(var i = 0;i<obj.length;i++) 
{ obj[i]=create('div',null,function(elm){elm.className = obj[i];}); } 
obj[2].innerHTML = this.Info; 
obj[4].innerHTML = this.Content; 
obj[1].appendChild(obj[2]); 
obj[1].appendChild(obj[3]); 
obj[0].appendChild(obj[1]); 
obj[0].appendChild(obj[4]); 
obj[0].appendChild(obj[5]); 
document.body.appendChild(obj[0]); 
this._dragobj = obj[0]; 
this._resize = obj[5]; 
this._cancel = obj[3]; 
this._body = obj[4]; 
////////////////////////////////////////////////////////////////////////////////o,x1,x2 
////设置Dialog的长 宽 ,left ,top 
with(this._dragobj.style){ 
     height = this.Height + "px";top = this.Top + "px";width = this.Width +"px";left = this.Left + "px";zIndex = this.Zindex; 
} 
this._body.style.height = this.Height - this.Titleheight-parseInt(CurrentStyle(this._body).paddingLeft)*2+'px'; 
/////////////////////////////////////////////////////////////////////////////// 添加事件 
addListener(this._dragobj,'mousedown',BindAsEventListener(this, this.Start,true)); 
addListener(this._cancel,'mouseover',Bind(this,this.Changebg,[this._cancel,'0px 0px','-21px 0px'])); 
addListener(this._cancel,'mouseout',Bind(this,this.Changebg,[this._cancel,'0px 0px','-21px 0px'])); 
addListener(this._cancel,'mousedown',BindAsEventListener(this,this.Disappear)); 
addListener(this._body,'mousedown',BindAsEventListener(this, this.Cancelbubble)); 
addListener(this._resize,'mousedown',BindAsEventListener(this, this.Start,false)); 
}, 
Disappear:function(e){ 
     this.Cancelbubble(e); 
     document.body.removeChild(this._dragobj); 
}, 
Cancelbubble:function(e){ 
     this._dragobj.style.zIndex = ++Dialog.Zindex; 
     document.all?(e.cancelBubble=true):(e.stopPropagation()) 
}, 
Changebg:function(o,x1,x2){ 
     o.style.backgroundPosition =(o.style.backgroundPosition==x1)?x2:x1; 
}, 
Start:function(e,isdrag){ 
     if(!isdrag){this.Cancelbubble(e);} 
     this._Css = isdrag?{x:"left",y:"top"}:{x:"width",y:"height"} 
     this._dragobj.style.zIndex = ++Dialog.Zindex; 
     this._isdrag = isdrag; 
     this._x = isdrag?(e.clientX - this._dragobj.offsetLeft||0):(this._dragobj.offsetLeft||0) ; 
     this._y = isdrag?(e.clientY - this._dragobj.offsetTop ||0):(this._dragobj.offsetTop||0); 
     if(isIE) 
     { 
         addListener(this._dragobj, "losecapture", this._fS); 
         this._dragobj.setCapture(); 
     } 
     else 
     { 
         e.preventDefault(); 
         addListener(window, "blur", this._fS); 
     } 
     addListener(document,'mousemove',this._fM) 
     addListener(document,'mouseup',this._fS) 
}, 
Move:function(e){ 
     window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 
     var i_x = e.clientX - this._x, i_y = e.clientY - this._y; 
     this._dragobj.style[this._Css.x] = (this._isdrag?Math.max(i_x,0):Math.max(i_x,this.Minwidth))+'px'; 
     this._dragobj.style[this._Css.y] = (this._isdrag?Math.max(i_y,0):Math.max(i_y,this.Minheight))+'px' 
     if(!this._isdrag) 
     this._body.style.height = Math.max(i_y -this.Titleheight,this.Minheight-this.Titleheight)-2*parseInt(CurrentStyle(this._body).paddingLeft)+'px'; 
}, 
Stop:function(){ 
     removeListener(document,'mousemove',this._fM); 
     removeListener(document,'mouseup',this._fS); 
     if(isIE) 
     { 
         removeListener(this._dragobj, "losecapture", this._fS); 
         this._dragobj.releaseCapture(); 
         } 
         else 
            { 
            removeListener(window, "blur", this._fS); 
         }; 
     } 
}) 
new Dialog({Width:300,Height:300,Left:300,Top:300}); 
new Dialog({Info:"脚本之家",Content:"脚本之家www.jb51.net"}); 

function creat(){ 
     new Dialog({Info:title="标题"+i,Left:300+left,Top:300+left,Content:'内容'+i,Zindex:(++Dialog.Zindex)}); 
i++;left +=10; 
} 
// --></script> 
</body> 
</html>
 
分享到:
评论
2 楼 jackeysion 2010-03-07  
dingyaodanv1 写道
实现了吗?

这个是以前从网上找的,主要是看一下其中的几个事件,放这好找一点。呵呵
1 楼 dingyaodanv1 2010-02-23  
实现了吗?

相关推荐

    可拖动div边框改变大小的方法

    可拖动div边框改变大小的方法,jquery拖拽改变div大小效果,。。。。。。。。。。。。。。。。。。。。。。。。。

    拖拽+拖拽改变div大小

    在网页开发中,"拖拽+拖拽改变div大小"是一种常见的交互设计,它允许用户通过鼠标拖动来调整div元素的尺寸。这种功能在创建可定制的布局、图形编辑工具或者任何需要用户自定义区域大小的应用中非常有用。本文将深入...

    新Div拖动调整大小实例

    选中复选框(可移动、可调整大小)后,打开的DIV具有移动/调整大小的功能(此时移动/调整大小快捷键可使用); 反之,不可移动/调整大小(此时移动/调整大小快捷键无效) 单选框默认居中打开选中,无论有无保存DIV位置和...

    Div拖动/调整大小实例

    Div拖动/调整大小实例 教你迅速的掌握如何写js 可以用鼠标控制div大小和位置 Div拖动/调整大小实例 教你迅速的掌握如何写js 可以用鼠标控制div大小和位置

    dragresize 可让用户调整页面DIV的大小和位置

    "dragresize"库可能还包含一些高级特性,例如限制元素的最小和最大尺寸、禁用拖放或调整大小的功能、自定义拖动或调整大小的样式等。这些可以通过传递配置对象到`enable`方法来实现,例如: ```javascript var ...

    拖动div的四个拐角改变其大小

    现在,div不仅可以调整大小,还可以在指定区域内自由拖动。这个功能对于创建具有高度用户交互性的网页非常有用,尤其是在需要用户自定义布局或调整元素尺寸的应用中。 在实际项目中,可能还需要考虑其他因素,比如...

    js拖动div并拖动DIV的大小

    在JavaScript中,实现一个div元素的拖放以及调整大小的功能是一项常见的需求,尤其在构建交互式的Web应用时。这个功能涉及到HTML、CSS和JavaScript的综合运用。以下将详细讲解实现这个功能所需的关键知识点: 1. **...

    手动拖动div改变窗口宽度大小 左中右三列拖拽

    手动拖动div改变窗口宽度大小 左中右三列拖拽

    DIV层拖动的实现,可改变大小.

    DIV层拖动和改变大小的实现 在Web开发中,DIV层拖动和改变大小是非常常见的交互方式。通过使用JavaScript和CSS,可以实现DIV层的拖动和改变大小的功能。本文将对DIV层拖动和改变大小的实现进行详细的介绍。 一、...

    js实现 1.两列的左右拖动改变div大小 2.三列的左右拖动改变div大小 3.两行的上下拖动改变div大小

    js实现 1.两列的左右拖动改变div大小 2.三列的左右拖动改变div大小 3.两行的上下拖动改变div大小 可用于各种框架 vue React Angular

    js拖拽div随意摆放

    本文将深入探讨如何使用JavaScript实现这个功能,让div元素可以在页面上自由移动,实现“js拖拽div随意摆放”。 首先,我们需要创建一个可拖动的div元素。在HTML中,我们可以这样定义: ```html &lt;div id=...

    jquery实现拖拽调整Div大小

    在实现拖拽调整大小的过程中,涉及到多种鼠标事件,主要包括mouseover(鼠标悬停)、mousemove(鼠标移动)、mousedown(鼠标按下)以及mouseup(鼠标释放)。这些事件将被用来捕捉用户的操作动作,并且触发后续的...

    JQ实现DIV大小、位置拖动调整源码

    在这个源码中,"改变大小和移动div.htm"可能是包含此功能的HTML示例文件,它展示了如何在实际页面中应用这个拖放调整大小和位置的脚本。开发者可以通过查看和修改这个示例,了解如何将该功能集成到自己的项目中。 ...

    JS可拖动,可改变大小resize div

    接下来,我们需要编写JavaScript代码来实现拖动和调整大小的功能。这通常涉及到以下步骤: 1. **添加事件监听器**:我们需要监听鼠标按下(mousedown)、移动(mousemove)和松开(mouseup)事件。这些事件是实现...

    手动拖动div改变窗口宽高大小

    手动拖动div改变窗口宽高大小

    JS完美拖拽+拖动改变Div的宽高+关闭按钮

    标题“JS完美拖拽+拖动改变Div的宽高+关闭按钮”涉及到的是JavaScript实现的交互功能,主要包括三个部分:元素的拖拽、拖动时动态调整元素尺寸以及添加关闭按钮的功能。以下是对这些知识点的详细说明: 1. **元素...

    拖动div 拉伸div

    纯js版本的拖动div 拉伸div 复用拖拽函数 复用改变大小函数

    vue实现div可拖动位置也可改变盒子大小的原理

    在Vue中实现一个div元素既可以拖动改变位置,又可以调整大小的功能,涉及到的核心技术包括事件监听、CSS定位以及DOM操作。下面将详细介绍实现这一功能的步骤和原理。 首先,我们需要监听鼠标事件来处理拖动和改变...

    jQuery可拖拽DIV页面

    本项目“jQuery可拖拽DIV页面”利用jQuery及其扩展插件jQuery UI,实现了一个用户界面元素(如div)可以被拖动的功能,从而为用户提供更直观的交互体验。以下是对这个知识点的详细讲解: 1. **jQuery基础**:jQuery...

    asp.net中实现可拖动div

    CSS则用于控制页面的样式和布局,包括设置div的位置和大小。在CSS中,我们可以使用position属性(如static, relative, absolute或fixed)来控制元素的位置,并使用top, right, bottom和left属性来精确调整元素的偏移...

Global site tag (gtag.js) - Google Analytics