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

306 阅读 0 评论 202 点赞

我是靠谱客的博主英俊黄豆，这篇文章主要介绍可拖动可改变大小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"></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.uoften.com/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.uoften.com/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.uoften.com/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> 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]