关于CHROME下如何实现类似于IE中的SETCAPTURE效果

husband8375 2011-01-17 03:38:19

在iframe里拖动时，很卡。好像没有捕捉到

window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

<!--

body {

	margin-left: 0px;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

overflow:hidden;

}

-->

</style>

<style> 

.navPoint { 

COLOR: white; CURSOR: hand; FONT-FAMILY: Webdings; FONT-SIZE: 9pt 

} 

</style> 

<script type="text/javascript" src="drag.js"></script>

</head>



<body>

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="table-layout:fixed;">

  <tr>

    <td width="173" id=frmTitle noWrap name="fmTitle" align="center" valign="top">

	<div id='right' height="100%" width="180">

		<div id="no" style="width:12;hegiht:100%">dddddddddddddddddd</div>

	</div>

			

	</td>

    <td width="10" id="square" name="square" valign="middle" background="images/main_12.gif" style="cursor:col-resize">

    </td>

    <td align="center" valign="top" width="480">

		<iframe id="right2" name="right2" src="a.html"  height="100%"width="100%" /> 

    </td>

  </tr>

</table>

</body>

</html>

var lf="right";

var rf="right2";

function $(obj)

{

    return typeof(obj)=="string"?document.getElementById(obj):obj;

}



window.onload=function(){

	var obj=$("square");

	drag(obj);

}



function drag(obj){

	

	obj.onmousedown=function(e){

		

		var d=document;

		

       	e = e || window.event;

		

		if (e.which == null){

          /* IE case */

         	button= (e.button < 2) ? "LEFT" : ((e.button == 4) ? "MIDDLE" : "RIGHT");

		}else{

          /* All others */

         	button= (e.which < 2) ? "LEFT" : ((e.which == 2) ? "MIDDLE" : "RIGHT");

		}

      	if(button!="LEFT"){

       		 return false;

      	}    

		

		obj.style.cursor='col-resize';

		var e = window.event;

		obj.mouseDownX=e.clientX; 

		obj.parentLeftFW = document.getElementById(lf).parentNode.clientWidth; 

		obj.parentRightFW = document.getElementById(rf).parentNode.clientWidth;

		if (obj.setCapture) { 

			obj.setCapture(); 

		} else if(window.captureEvents){

		   window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);

	  	}

		if(!obj.createBox){

			var div = document.createElement("div");

			div.id = 'box'+lf+rf;

			div.style.display = 'none';

			div.style.position = 'absolute';

			div.style.border = '1px dotted red';

			div.style.zIndex = '5';

			div.style.width = '3px';

			div.style.height = '100%';

			document.body.appendChild(div);

			obj.parentBox  = document.getElementById(div.id);

			obj.createBox = 1;	

		}

		

		var dragfirst=true;

	/********************************/

	 d.onmousemove=function(e){

		e= e || window.event;

		if(obj.mouseDownX<0) return false; 

		obj.removed = 1;

		obj.parentBox.style.display = 'inline';	

		obj.parentBox.style.width = obj.offsetWidth;

		obj.parentBox.style.height = obj.offsetHeight;

		obj.parentBox.style.left = e.clientX;

		obj.parentBox.style.top = getPosTop(obj);

		dragfirst=false;

		

		  d.onselectstart=function()

        {

            return false

        }

   };

   /********************************/

   d.onmouseup=function(e){

		e= e || window.event;

		if(!dragfirst){

			var changeW = e.clientX*1-obj.mouseDownX;

			if(changeW!=0&&obj.removed){

				var newLeftW=obj.parentLeftFW*1+changeW; 

				var newRightW=obj.parentRightFW*1-changeW; 

				if(newLeftW<=200) {

					var temp = newLeftW;

					newLeftW = 20;

					newRightW =newRightW-(200-temp);

				}

				if(newRightW<=200) {

					var temp = newRightW;

					newRightW = 200;

					newLeftW = newLeftW-(200-temp);

				}

				

				var leftObj = document.getElementById(lf).parentNode;

				

				leftObj.width = newLeftW;

				

				var rightObj = document.getElementById(rf).parentNode;

				rightObj.width = newRightW-4;

			}

			if (obj.releaseCapture) {    // Internet Explorer

				obj.releaseCapture ();

			}else if(window.captureEvents){

				window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

			}

		}

		obj.mouseDownX=0; 

		eventX=0;

		obj.removed = 0;

		obj.style.cursor = 'default';

		obj.parentBox.style.display = 'none';

		d.onmousemove=null;

	 	d.onmouseup=null;	

		d.onselectstart=null;

   };

   /********************************/

	d.onmouseover=function(){

		obj.style.cursor='col-resize';

	};

	/********************************/

	d.onmouseout=function(){

		obj.style.cursor='default';;

	};

		//////////////////////////

	};

  

}



function getPosLeft(elm) {

        var left = elm.offsetLeft;

        while((elm = elm.offsetParent) != null)        {

                left += elm.offsetLeft;

        }

        return left;

}

function getPosTop(elm) {

        var top = elm.offsetTop;

        while((elm = elm.offsetParent) != null)        {

                top += elm.offsetTop;

        }

        return top;

}