`

div js 分割

IEBlogUP 
阅读更多
<html>
<head>
<title>Separator</title>
<style>
/* 左右分割条样式 */
.lrSeparator {
background-color:#549FE3;
cursor:e-resize;
font-size : 1px;
}
/* 上下分割条样式 */
.udSeparator {
background-color:#549FE3;
cursor:s-resize;
font-size : 1px;
}
td {
border:1px solid #549FE3;
}
</style>
</head>
<body style="margin: 0px;" >

<table cellpadding="1" style="border:0px solid red;width:100%;" cellspacing="1" height="35" >
<tbody>
<tr >
<td id=lf minWidth="120" >宽度自动</td>
<td id=rt minWidth="120">鼠标移到左边</td>
</tr>
</tbody>
</table>
<br>
<table cellpadding="1" style="border:0px solid red;" cellspacing="3" height="50" >
<tbody>
<tr>
<td id=lfa style="width:150px;" minWidth="50">宽度自定义1</td>
<td id=cta style="width:150px;" minWidth="50">宽度自定义2</td>
<td id=rta style="width:250px;" minWidth="50">宽度自定义3</td>
<td id=rtb style="width:250px;" minWidth="50">宽度自定义4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>

<div style="position:absolute;top:150px;">
<table cellpadding="1" style="border:0px solid red;width:100%;" cellspacing="3" height="90%" >
<tbody>
<tr id=up minHeight="30" style="height:30px;">
<td id=left minWidth="50" >111</td>
<td id=center minWidth="50">222</td>
</tr>
<tr id=down minHeight="30" style="height:150px;">
<td COLSPAN=2 >down</td>
</tr>
</tbody>
</table>
</div>

<div id=divl minWidth="30" style="position:absolute;top:350px;width:100px;left:0px;height:100px;background-color:#CCCCCC">div1</div>
<div id=divr minWidth="30" style="position:absolute;top:350px;width:100px;left:102px;height:100px;background-color:#FF0000">div2</div>

<div id=divu minHeight="30" style="position:absolute;top:350px;width:100px;left:250px;height:50px;background-color:#CCCCCC">div3</div>
<div id=divd minHeight="30" style="position:absolute;top:402px;width:100px;left:250px;height:100px;background-color:#FF0000">div4</div>
<script>
/**
* 类 名 称： Separator|SP
* 功能说明： 分割条类
* 版权信息： CopyRight 2005-2006 JoeCom
* 参数说明： o1,o2 : 两个对象
spTpe: 方向，是左右，还是上下
w:宽度;wx:left的差值;wy:top的差值
wh:左右拖动时，是宽度的差值，上下则是高度的差值
wl:上下拉动时时的一个差值
差值的存在是因为控件可能存在border,padding,top等一些情况，
还有就是控件的position不是为absolute
* 创 建 人： JoeCom | MSN:juwuyi@hotmail.com | blog:http://hi.baidu.com/joecom
* 创建日期： 2006-07-27
* 修改记录：
* 备 注 ： IE下效果最好，FF下TD标签不支持onresize事件？
*/

//以下定义拖拉方向的常量
SP_LEFTRIGHT = 1; //左右拖拉
SP_UPDOWN = 2; //上下拖拉

function Separator(o1,o2,spType,w,wx,wy,wh,wl){
var me = this;
this.o1 = (typeof o1=="string")?document.getElementById(o1):o1;
this.o2 = (typeof o2=="string")?document.getElementById(o2):o2;
this.w = w||3; //Width or Height
this.wx = wx||0; //parentOffsetLeft
this.wy = wy||0; //parentOffsetTop
this.wh = wh||0; //parentOffsetHeight
this.wl = wl||0; //parentOffsetWidth
//this.wr = wr||0; //parentOffsetRight
this.autoresize = true;
this.spType = (spType==SP_UPDOWN)?SP_UPDOWN:SP_LEFTRIGHT;
this.allWidth = this.o1.clientWidth + this.o2.clientWidth + this.w ;
this.allHeight = this.o1.clientHeight + this.o2.clientHeight + this.w ;
this.isIE = false;

this.addEvent = function(el, evname, func) {
if (el.attachEvent) { // IE
el.attachEvent("on" + evname, func);
this.isIE = true;
} else if (el.addEventListener) { // Gecko / W3C
el.addEventListener(evname, func, true);
} else {
el["on" + evname] = func;
}
};

this.sp = document.createElement("div");
document.body.appendChild(this.sp);

this.init = function(){
if (this.spType==SP_LEFTRIGHT)
{
with (this.sp){
style.position = "absolute";
style.left = this.o1.offsetLeft + this.o1.clientWidth + this.wx + "px";
style.top = this.o1.offsetTop + this.wy + "px" ;
style.width = this.w;
style.height = this.o1.clientHeight + this.wh + "px";
className = "lrSeparator";
style.zIndex = "200";
}
}else
{
with (this.sp){
style.position = "absolute";
style.left = this.o1.offsetLeft + this.wx + "px";
style.top = this.o1.offsetTop + this.o1.clientHeight + this.wy + "px" ;
style.width = this.o1.clientWidth + this.wh + "px";
style.height = this.w;
className = "udSeparator";
style.zIndex = "200";
}
}
}

this.init();
this.dd = new ObjectDragDrop(this.sp);
this.dd.moveStyle = (this.spType==SP_LEFTRIGHT)?DD_HMOVE:DD_VMOVE;

this.resize = function(){
this.init();
}

this.addEvent(window,"resize",function(){me.resize();});
this.addEvent(this.o1,"resize",function(){me.resize();});

this.dd.isMoved = function(newPosX,newPosY){
if (me.spType==SP_LEFTRIGHT)
{
var mw1 = me.o1.getAttribute("minWidth");
var mw2 = me.o2.getAttribute("minWidth");
if (mw1==null){mw1 = 0;}
if (mw2==null){mw2 = 0;}
return {x:((newPosX - me.o1.offsetLeft)>=mw1&&(newPosX - me.o1.offsetLeft)<=(me.allWidth - mw2)),y:false};
}else
{
var mh1 = me.o1.getAttribute("minHeight");
var mh2 = me.o2.getAttribute("minHeight");
if (mh1==null){mh1 = 0;}
if (mh2==null){mh2 = 0;}
return {x:false,y:((newPosY - me.o1.offsetTop - me.wy)>=mh1&&(newPosY - me.o1.offsetTop - me.wy)<=( me.allHeight - mh2))};
}
}

this.dd.onDrop = function(){
if (me.spType==SP_LEFTRIGHT)
{
me.o1.style.width = me.sp.offsetLeft - me.o1.offsetLeft - me.wx - me.wl;
if (!me.autoresize){
me.o2.style.width = me.allWidth - me.o1.clientWidth - me.w;
if (me.o2.tagName!="TD")
{
me.o2.style.left = me.sp.offsetLeft;
}
}
}else
{
me.o1.style.height = me.sp.offsetTop - me.o1.offsetTop - me.wy;
if (!me.autoresize){
me.o2.style.height = me.allHeight - me.o1.clientHeight ;
if (me.o2.tagName!="TR")
{
me.o2.style.top = me.sp.offsetTop;
}
}
}
if (!me.isIE){
me.init();
}
}
}

/**
* 类 名 称： DragDrop|DD
* 功能说明： 可拖动类
* 版权信息： CopyRight 2005-2006 JoeCom
* 创 建 人： JoeCom | MSN:juwuyi@hotmail.com | blog:http://hi.baidu.com/joecom
* 创建日期： 2006-07-19
* 修改记录： 1. 2006-07-21 加上scrollTop 和 scrollLeft的相对移动
ł. 2006-07-25 加入moveStyle属性，增加水平移动和垂直移动的功能
Ń. 2006-07-25 加入isMoved函数，增加范围移动功能
*/

//以下定义移动方向的常量
DD_FREEMOVE = 0; //自由移动，没有限制
DD_HMOVE = 1; //水平移动，也就是左右移动
DD_VMOVE = 2; //垂直移动，也就是上下移动

function ObjectDragDrop(obj){
var me = this;
this.moveStyle = DD_FREEMOVE ;
this.foo = (typeof obj=="string")?document.getElementById(obj):obj;
this.onDrop = function(){};
this.onDrag = function(){};
this.isMoved = function(newPosX,newPosY){return {x:true,y:true}};//offsetX:x的移动距离;offsetY:y的移动距离

this.foo.onmousedown = function(e){
var foo = me.foo;
e = e||event;
if( e.layerX ){ foo.oOffset = {x:e.layerX, y:e.layerY }; }
else { foo.oOffset = {x:e.offsetX, y:e.offsetY }; }
document.onmousemove = me.drag;
document.onmouseup = me.drop;
document.onselectstart = function(){ return false; };
}

this.drag = function(e){
var foo = me.foo;
e=e||event;
var mv = me.isMoved(e.clientX - foo.oOffset.x + document.body.scrollLeft,
e.clientY - foo.oOffset.y + document.body.scrollTop);
if (mv.x&&me.moveStyle!=DD_VMOVE)
{
foo.style.left = e.clientX - foo.oOffset.x + document.body.scrollLeft + "px";
}
if (mv.y&&me.moveStyle!=DD_HMOVE)
{
foo.style.top = e.clientY - foo.oOffset.y + document.body.scrollTop + "px";
}
me.onDrag();
}

this.drop = function(e){
e=e||event;
document.onmousemove = document.onmouseup = document.onselectstart = null;
me.onDrop();
}
}


</script>
<script>
window.onload=function(){
//左右拖动
//宽度为百分比，自动调整型
var test1 = new Separator(lf,rt,SP_LEFTRIGHT,1,1,0,1,1);
//宽度自定义型
var test2 = new Separator(lfa,cta,SP_LEFTRIGHT,3,2,56,2,2);
test2.autoresize = false;
var test3 = new Separator(cta,rta,SP_LEFTRIGHT,3,2,56,2,2);
test3.autoresize = false;
var test4 = new Separator(rta,rtb,SP_LEFTRIGHT,3,2,56,2,2);
test4.autoresize = false;
var sp = new Separator(left,center,SP_LEFTRIGHT,3,2,150,2,2);
//上下拖动
var sp1=new Separator(up,down,SP_UPDOWN,3,0,150,-6);
sp1.autoresize = false;
//div左右拉动
var divsp = new Separator(divl,divr,SP_LEFTRIGHT,2);
divsp.autoresize = false;
//div上下拉动
var divud=new Separator(divu,divd,SP_UPDOWN,2);
divud.autoresize = false;
}
</script>
</body>
</html>
分享到：
| 拖拽div
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    splitter.js 分割div 自由拖动

    `splitter.js` 是一个JavaScript库，主要用于在网页中创建可拖动的分割线，以实现用户自由调整页面布局的功能。这个库使得开发者能够轻松地将页面分为上下、左右等多栏布局，并允许用户根据自己的需求动态改变这些...

    js实现分割条效果纯js代码

    这个"js实现分割条效果纯js代码"的项目，名为`spliter`，就是基于上述逻辑实现的一个例子。你可以下载源代码进行测试和调试，以适应你的具体需求。通过理解并实践这个例子，你将能更好地掌握JavaScript在网页交互中...

    可拖动的jQuery分割div容器插件

    可拖动的jQuery分割div容器插件 split.js是一款可上下左右拖动的jQuery分割div容器插件。该插件可以实现父容器div的上下左右动态分割，并可以上下改变父div的高度，而且宽和高都是按百分比计算。

    div按当前时间水平分割

    这个场景就是"div按当前时间水平分割"的实现。 首先，我们需要理解HTML和CSS的基本概念。`div`是HTML中的一个块级元素，它通常用来进行页面布局或者包裹其他元素。在CSS中，我们可以设置`div`的各种样式属性，包括...

    可上下左右拖动的jQuery分割div容器插件

    总的来说，split.js是一款功能强大且易于使用的jQuery插件，能轻松实现div容器的动态分割，对于需要创建灵活布局的开发者来说，无疑是一个很好的工具。在实际项目中，结合CSS样式和JavaScript逻辑，可以创建出各种...

    asp.net中实现可拖动div

    接下来，我们将使用JavaScript或者jQuery库来实现div的拖动功能。JavaScript是一种客户端脚本语言，可以直接在用户的浏览器上运行，而jQuery则是一个简化JavaScript操作的库，提供了许多方便的功能，包括处理DOM操作...

    div页面框架布局

    通过使用div，我们可以将一个大的HTML文档分割成多个区域，每个区域可以独立设置样式，从而实现复杂的设计结构。在CSS中，我们可以利用div的灵活性，通过设置width、height、margin和padding等属性，调整元素的大小...

    JS控制DIV圆角代码

    总的来说，实现JS控制的DIV圆角代码涉及了对不同浏览器特性的理解和利用，以及对JavaScript DOM操作的掌握。通过CSS3的`border-radius`、JavaScript库以及图像切片技术，我们可以使网页在新旧浏览器间保持一致的视觉...

    DIV自动适应高度

    - DIV是HTML中的一个常用标签，全称为Division，意为“分隔”，主要用于网页布局，通过CSS样式控制其外观和位置，可以将网页内容分割成独立的、可控制的区域。 2. **为什么要使DIV自动适应高度**： - 在多列布局...

    jquery splitter 动态分割区域布局，支持动态拖拉，功能强大，简单易用

    jQuery Splitter是基于JavaScript库jQuery的一款插件，它的主要功能是创建两个或多个可调整大小的区域，用户可以通过鼠标拖动分割线来改变这些区域的尺寸。这使得开发者能够创建出高度互动和自定义的Web界面，适应...

    NET弹出层弹出div

    `div`是HTML中的一个块级元素，全称为“division”，意味着它可以将页面内容分割成独立的区域。开发者可以使用CSS（层叠样式表）来控制`div`的样式，包括位置、大小、颜色、边框等，使其成为构建网页布局的重要工具...

    js DIV滚动条随机位置的设置技巧.docx

    * JS 截取与分割字符串常用技巧总结 * JavaScript 中的 alert() 函数使用技巧详解 * 在 JS 数组特定索引处指定位置插入元素的技巧 * Javascript 的数组与字典用法与遍历对象的属性技巧 * JavaScript 截取、切割字符...

    jQuery倾斜分割布局的幻灯片切换特效.zip

    &lt;div class="skw-page__content"&gt;&lt;/div&gt;  &lt;/div&gt; &lt;/div&gt; &lt;div class="skw-page__half skw-page__half--right"&gt;  &lt;div class="skw-page__skewed"&gt; &lt;div class="skw-page__content"&gt;  ...

    DIV+CSS简单登录界面模板

    首先，`Div`元素是HTML中的一个块级元素，用于将内容分割成独立的区域，这样可以更好地组织和控制页面布局。在登录界面模板中，`Div`通常用于创建不同的组件，如登录表单、标题、背景图像等。例如，你可以有一个`Div...

    css+div实例

    2. 模块化设计：用div分割页面为多个模块，每个模块有自己的样式，方便管理和复用。 3. 图片轮播：使用div和CSS动画实现图片轮播效果，增强用户体验。 4. 弹出框和提示信息：利用CSS的`display`属性和定位，创建可...

    js css3 3D分割图片悬停拼接效果

    【标题】"js css3 3D分割图片悬停拼接效果" 描述了一种使用JavaScript和CSS3技术实现的动态网页设计技巧。这个效果在鼠标悬停在图片上时，图片会以3D方式分割并重新拼接，为用户带来丰富的交互体验，提升网站的视觉...

    模仿webQQ,采用js+div+css

    【标题】"模仿webQQ,采用js+div+css"所涉及的知识点主要集中在Web前端开发领域，特别是关于网页设计和JavaScript技术的应用。WebQQ是腾讯公司推出的一种基于Web浏览器的即时通讯服务，用户无需下载客户端，只需通过...

    div+css网页模板

    1. **Div元素的理解**：Div是Division的缩写，意为“分割”，在HTML中用`&lt;div&gt;`标签表示。它可以包裹任何数量的其他HTML元素，用于创建网页布局的大块区域。通过设置Div的属性，如`id`或`class`，我们可以方便地对其...

    css+div 经典问题

    3. 分割屏幕布局：利用div和CSS，可以轻松实现左右或上下分割的屏幕布局，适用于创建响应式的多栏界面。 三、jQuery语法在CSS+div中的应用 jQuery是一个强大的JavaScript库，简化了DOM操作、事件处理和动画效果。...

    css+div 制作TAB

    这种方法通常涉及到切图，将每个TAB按钮的背景分割成多个图片，然后通过CSS定位和叠加这些图片。虽然视觉效果可能更佳，但维护和适应不同屏幕尺寸时会更加复杂。 **CSS+Div与图片制作TAB的比较：** - **灵活性**：...

Magicbox
Global site tag (gtag.js) - Google Analytics