CSDN博客

img x51x

让HTML表格的边框可以拽动

发表于2004/10/12 14:57:00  547人阅读

HTML中的Table的单元格是不能够通过鼠标拽动而改变大小的,如果想实现如同word中的表格一样可以通过鼠标拽动,就需要自己写函数了。可以通过两种方法来实现,一是直接写网页脚本,二是写htc扩展table的行为。我这里采用了htc扩展table行为的方法来实现它,好处是脚本代码的封装和引用都很方便。

下面是一个实现了基本功能的htc:

splitCellTable.htc:

<PUBLIC:COMPONENT ID=_SplitCellTable_Htc Name="SplitCellTable">
 <PUBLIC:PROPERTY NAME="version" VALUE="split cell table behavior 1.0" />
 <PUBLIC:PROPERTY NAME="author" VALUE="menghonbo" />

 <PUBLIC:METHOD NAME="SplitTo" INTERNALNAME="_SplitTo"/>

 <PUBLIC:EVENT NAME="onSpliting" ID="eventSpliting" />
 <PUBLIC:EVENT NAME="onSplited" ID="eventSplited" />

    <PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="on_initia()"/>
</PUBLIC:COMPONENT>
<SCRIPT LANGUAGE=javascript>
<!--
var marginSize = 5;
var status = 0;
var direction = 0;
var crtEleY = 0;
var crtEleX = 0;

function on_initia(){
 var _dragBorder = document.createElement("<div style='DISPLAY: none; FILTER: alpha( opacity=20 );POSITION: absolute;BACKGROUND-COLOR: black;overflow:hidden;'>");
 this.dragBorder = _dragBorder
 window.document.body.insertAdjacentElement("beforeEnd",_dragBorder);
 this.attachEvent("onmousemove",on_transMouse);
 this.attachEvent("onmouseout",on_mouseOut);
}

function on_transMouse(){
 this.style.cursor = "default";
 window.document.detachEvent("onmousemove",on_beginSplit);
 if(event.srcElement){
  if(event.srcElement.tagName=="TD"){
   crtObj = event.srcElement;
   if(event.offsetX < marginSize){
    this.style.cursor = "e-resize";
    direction = 1;
    if(crtObj.previousSibling)crtObj = crtObj.previousSibling;
   }
   if(event.offsetY < marginSize){
    this.style.cursor = "n-resize";
    direction=2;
    crtObj = crtObj.parentNode.previousSibling;
   }
   if(event.offsetX > (event.srcElement.offsetWidth - marginSize)){
    this.style.cursor = "e-resize";
    direction = 1;
   }
   if(event.offsetY > (event.srcElement.offsetHeight - marginSize)){
    this.style.cursor = "n-resize";
    direction=2;
   }
   window.document.attachEvent("onmousedown",on_beginSplit);
   status = 1;
  }
 }
}
function on_mouseOut(){
 window.document.detachEvent("onmousedown",on_beginSplit);
}
function on_beginSplit(){
 if(status!=1)return false;
 dragBorderShow();
 this.detachEvent("onmousemove",on_transMouse);
 window.document.attachEvent("onmousemove",dragMove);
 window.document.attachEvent("onscroll",dragMove);
 window.document.attachEvent("onmousemove",dragCheckState);
 window.document.attachEvent("onselectstart",dragSelect);
 window.document.attachEvent("onmouseup",fire_eventSplited);
 status = 2;
}

function dragBorderShow(){
 this.dragBorder.zIndex = 199;
 if(direction==1){
  this.dragBorder.style.height = window.document.body.offsetHeight - 10;
  this.dragBorder.style.width = 2;
  this.dragBorder.style.top = 2;
  this.dragBorder.style.left = event.clientX;
 }else if(direction==2){
  this.dragBorder.style.height = 2;
  this.dragBorder.style.width = window.document.body.offsetWidth - 25;
  this.dragBorder.style.top = event.clientY;
  this.dragBorder.style.left = 2;
 }
 this.dragBorder.style.display = "block";
 crtEleY = event.clientY;
 crtEleX = event.clientX;
}
function dragHide(){
 this.dragBorder.style.display = "none";
 this.dragBorder.style.height = "";
 this.dragBorder.style.top = "";
 this.dragBorder.style.left = "";
 this.dragBorder.style.width = "";
 this.dragBorder.zIndex = "";
}
function dragCheckState(){if(event.button != 1 )fire_eventSplited();}
function dragSelect(){return false;}
function dragMove(){
 if(event.button != 1){fire_eventSplited();return;}
 if(direction==2){
  this.dragBorder.style.top = event.clientY + window.document.body.scrollTop;
  if(event.clientY > window.document.body.clientHeight - 10 )window.scrollBy(0, 10);
  else if(event.clientY < 10){
   window.scrollBy(event.clientX, -10);
  }
 }else{
  this.dragBorder.style.left = event.clientX + window.document.body.scrollLeft;
  if(event.clientX > window.document.body.clientWidth - 10 )window.scrollBy(10,0);
  else if(event.clientX < 10){
   window.scrollBy(-10, event.clientY);
  }
 }
 fire_eventSpliting();
}

function fire_eventSpliting(){
 var oEvent  = document.createEventObject();
 if(direction==2)oEvent.scrollNum = event.clientY - crtEleY;
 else oEvent.scrollNum = event.clientX - crtEleX;
 eventSpliting.fire(oEvent);
}
function fire_eventSplited(){
 dragHide();
 var oEvent = document.createEventObject();
 if(direction==2){
  this.style.pixelHeight = this.clientHeight + (event.clientY - crtEleY); 
  crtObj.style.pixelHeight = crtObj.clientHeight + (event.clientY - crtEleY);
  oEvent.scrollNum = event.clientY - crtEleY;
 }else{
  this.style.pixelWidth = this.clientWidth + (event.clientX - crtEleX); 
  crtObj.style.pixelWidth = crtObj.clientWidth + (event.clientX - crtEleX)
  oEvent.scrollNum = event.clientX - crtEleX;
 }
 window.document.detachEvent("onmousemove",dragMove);
 window.document.detachEvent("onscroll",dragMove);
 window.document.detachEvent("onmousemove",dragCheckState);
 window.document.detachEvent("onmouseup",fire_eventSplited);
 window.document.detachEvent("onselectstart",dragSelect);
 this.attachEvent("onmousemove",on_transMouse);
 status = 0;
 eventSplited.fire(oEvent);
}
//-->
</SCRIPT>

 

在HTML的table中引用它

<TABLE id="myTable" cellSpacing=0 cellPadding=3 width="90%" border=1 style="behavior:url('splitCellTable.htc')">
   <TR>
    <TD>1</TD>
    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD>
    <TD>6</TD></TR>
  <TR>
    <TD>1</TD>
    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD>
    <TD>6</TD></TR>
  <TR>
    <TD>1</TD>
    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD>
    <TD>6</TD></TR>
  <TR>
    <TD>1</TD>
    <TD>2</TD>
    <TD>3</TD>
    <TD>4</TD>
    <TD>5</TD>
    <TD>6</TD></TR></TABLE>

阅读全文
0 0

相关文章推荐

img
取 消
img