首頁 > 開發者 > JavaScript

左右移動的js分割面板

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!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=utf-8" />
<title>無標題文檔-SH!</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>
<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(){
 
//div左右拉動
var divsp = new Separator(divl,divr,SP_LEFTRIGHT,2);
divsp.autoresize = false;

}
</script>
</head>

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

</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
keystone js js encode js min js php js serialize js today serialize js
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More