求：鼠标拖拽改变div尺寸的代码，要兼容各种浏览器,该如何处理
日期：2014-05-16 浏览次数：20380 次
求：鼠标拖拽改变div尺寸的代码，要兼容各种浏览器
如题，求大家帮忙提供，鼠标拖拽改变div尺寸的代码，要兼容各种浏览器。如今网上的类似代码很多，但是只兼容IE内核。我需要更好兼容性的。
------解决方案--------------------
csdn 的简历就有
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<title> - http://www.never-online.net </title>
<meta http-equiv= "ImageToolbar " content= "no " />
<meta name= "author " content= "never-online, BlueDestiny "/>
<meta name= "keywords " content= "never modules, Mozilla CSS, C#, .net, Reference, BlueDestiny, never-online "/>
<meta name= "description " content= "javascript reference, c sharp artilces "/>
<meta name= "creator.name " content= "never-online, BlueDestiny " />
<style type= "text/css " media= "all " title= "Default ">
* { font-size:10pt; font-family:Arial; }
#myDiv { background-color:appworkspace; width:200px; height:100px; color:#fff; text-align:center; }
</style>
</head>
<body id= "www.never-online.net ">
<div align= "center "> <div id= "myDiv "> Easy to write the dray code, <br/> this is a simple demo, <br/> by never-online, <br/> http://www.never-online.net </div> </div>
<script type= "text/javascript ">
// <![CDATA[
var getAbsolute = function (e) {
var width = e.offsetWidth;
var height = e.offsetHeight;
var left = e.offsetLeft;
var top = e.offsetTop;
while (e=e.offsetParent) {
left += e.offsetLeft;
top += e.offsetTop;
}
var right = left+width;
var bottom = top+height;
return {
'width ': width,
'height ': height,
'left ': left,
'top ': top,
'right ': right,
'bottom ': bottom
}
};
/* Kernel code, drag div change the coords */
/* by never-online, http://www.never-online.net */
var wrapId = "myDiv "; var wrap = document.getElementById(wrapId);
wrap.onmouseover = function () {
wrap.style.cursor = "se-resize ";
document.onmousedown = function (evt) {
/* save the original coordinates */
evt = window.event||evt; var a=getAbsolute(wrap);
wrap.cx=evt.clientX-a.width; wrap.cy=evt.clientY-a.height;
document.onmousemove = function (evt) {
/* change the coords when mouse is moveing */
evt = window.event||evt; try {
wrap.style.width = (evt.clientX-wrap.cx)+ "px ";
wrap.style.height = (evt.clientY-wrap.cy)+ "px ";
} catch (ex) {};
};
document.onmouseup = function () {
/* drag end release the event */
document.onmousemove = null;
document.onmouseup = null;
wrap.style.cursor= "default ";
};
};
}
//]]>
</script>
</body>
</html>
如题，求大家帮忙提供，鼠标拖拽改变div尺寸的代码，要兼容各种浏览器。如今网上的类似代码很多，但是只兼容IE内核。我需要更好兼容性的。
------解决方案--------------------
csdn 的简历就有
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<title> - http://www.never-online.net </title>
<meta http-equiv= "ImageToolbar " content= "no " />
<meta name= "author " content= "never-online, BlueDestiny "/>
<meta name= "keywords " content= "never modules, Mozilla CSS, C#, .net, Reference, BlueDestiny, never-online "/>
<meta name= "description " content= "javascript reference, c sharp artilces "/>
<meta name= "creator.name " content= "never-online, BlueDestiny " />
<style type= "text/css " media= "all " title= "Default ">
* { font-size:10pt; font-family:Arial; }
#myDiv { background-color:appworkspace; width:200px; height:100px; color:#fff; text-align:center; }
</style>
</head>
<body id= "www.never-online.net ">
<div align= "center "> <div id= "myDiv "> Easy to write the dray code, <br/> this is a simple demo, <br/> by never-online, <br/> http://www.never-online.net </div> </div>
<script type= "text/javascript ">
// <![CDATA[
var getAbsolute = function (e) {
var width = e.offsetWidth;
var height = e.offsetHeight;
var left = e.offsetLeft;
var top = e.offsetTop;
while (e=e.offsetParent) {
left += e.offsetLeft;
top += e.offsetTop;
}
var right = left+width;
var bottom = top+height;
return {
'width ': width,
'height ': height,
'left ': left,
'top ': top,
'right ': right,
'bottom ': bottom
}
};
/* Kernel code, drag div change the coords */
/* by never-online, http://www.never-online.net */
var wrapId = "myDiv "; var wrap = document.getElementById(wrapId);
wrap.onmouseover = function () {
wrap.style.cursor = "se-resize ";
document.onmousedown = function (evt) {
/* save the original coordinates */
evt = window.event||evt; var a=getAbsolute(wrap);
wrap.cx=evt.clientX-a.width; wrap.cy=evt.clientY-a.height;
document.onmousemove = function (evt) {
/* change the coords when mouse is moveing */
evt = window.event||evt; try {
wrap.style.width = (evt.clientX-wrap.cx)+ "px ";
wrap.style.height = (evt.clientY-wrap.cy)+ "px ";
} catch (ex) {};
};
document.onmouseup = function () {
/* drag end release the event */
document.onmousemove = null;
document.onmouseup = null;
wrap.style.cursor= "default ";
};
};
}
//]]>
</script>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
