div拖动边界改变大小的js代码，其中关于穿透层对于低版本的IE不兼容例如IE8。代码我发上来，求大神指点下
<scripttype="text/javascript"src="/js/jquery-1.7.1.js"></script><styletype="text/css"...
<script type="text/javascript" src="/js/jquery-1.7.1.js"></script>
<style type="text/css">
.box2 {
margin: 20px 20px 0 0;
position: relative;
float: left;
z-index: 10000;
border: 1px solid red;
padding: 1px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.move_helper {
position: fixed;
left: 0;
top: 0;
-moz-opacity: 0.0;
opacity: 0.0;
filter: Alpha(Opacity = 0);
width: 100%;
height: 100%;
z-index: -1;
}
</style>
<script type="text/javascript">
var currentMousePoint = {
x : 0,
y : 0
};
var currentMoveType = "";
function moveClick(type, event, id,index) {
var event = event || window.event;
moveOver(index);
$("#" + id).css("z-index", 99999999);
currentMousePoint = {
x : event.clientX,
y : event.clientY
};
currentMoveType = type;
}
function moveWindow(id, event) {
var event = event || window.event;
if (currentMoveType === "") {
return;
}
var window = $("#" + id);
var windowWidth = window.width();
var windowHeight = window.height();
var windowOffset = window.offset();
var diffMouseX = event.clientX - currentMousePoint.x;
var diffMouseY = event.clientY - currentMousePoint.y;
switch (currentMoveType) {
case "rc":
window.width(windowWidth + diffMouseX);
window.find(".cb").width(windowWidth + diffMouseX - 8);
break;
case "rb":
window.width(windowWidth + diffMouseX).height(
windowHeight + diffMouseY);
window.find(".rc").height(windowHeight + diffMouseY - 8);
window.find(".cb").width(windowWidth + diffMouseX - 8);
break;
case "cb":
window.height(windowHeight + diffMouseY);
window.find(".rc").height(windowHeight + diffMouseY - 8);
break;
}
currentMousePoint.x = event.clientX;
currentMousePoint.y = event.clientY;
}
function moveUp() {
currentMoveType = "";
$(".move_helper").css("z-index", -1);
}
function moveOver(index){
$(".move_helper").attr({"id":"move_helper_"+index,"onmousemove":"moveWindow('box_move_helper_"+index+"',event);"});
}
$(function(){
moveOver(1);
});
</script>
</head>
<body>
<div class="move_helper" onmouseup="moveUp()"></div>
<c:forEach begin="1" end="5" varStatus="index">
<div style="display: block; overflow: hidden; zoom: 1;float: left;">
<div class="box2" id="box_move_helper_${index.count }" style="width:200px;height:300px;">
<div class="rc" onmousedown="moveClick('rc',event,'move_helper_${index.count }','${index.count }');" onmouseup="moveUp()" ></div>
<div class="cb" onmousedown="moveClick('cb',event,'move_helper_${index.count }','${index.count }');" onmouseup="moveUp()" ></div>
<div id="moduleBox_${index.count }" style="width: 100%; height: 100%;">
${index.count }
</div>
</div>
</div>
</c:forEach>
</body>
</html>
.con {
padding-top: 5px;
}
.rc,.lb,.cb,.rb {
position: absolute;
left: 0;
top: 0;
width: 5px;
height: 5px;
}
.rc {
height: 100%;
top: 5px;
}
.cb {
left: 5px;
width: 100%;
}
.rc,.rb {
right: 0;
left: auto;
}
.lb,.cb,.rb {
top: auto;
bottom: 0;
}
.cb {
cursor: n-resize;
}
.rc {
cursor: w-resize;
}
中间省略的样式， 展开
<style type="text/css">
.box2 {
margin: 20px 20px 0 0;
position: relative;
float: left;
z-index: 10000;
border: 1px solid red;
padding: 1px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.move_helper {
position: fixed;
left: 0;
top: 0;
-moz-opacity: 0.0;
opacity: 0.0;
filter: Alpha(Opacity = 0);
width: 100%;
height: 100%;
z-index: -1;
}
</style>
<script type="text/javascript">
var currentMousePoint = {
x : 0,
y : 0
};
var currentMoveType = "";
function moveClick(type, event, id,index) {
var event = event || window.event;
moveOver(index);
$("#" + id).css("z-index", 99999999);
currentMousePoint = {
x : event.clientX,
y : event.clientY
};
currentMoveType = type;
}
function moveWindow(id, event) {
var event = event || window.event;
if (currentMoveType === "") {
return;
}
var window = $("#" + id);
var windowWidth = window.width();
var windowHeight = window.height();
var windowOffset = window.offset();
var diffMouseX = event.clientX - currentMousePoint.x;
var diffMouseY = event.clientY - currentMousePoint.y;
switch (currentMoveType) {
case "rc":
window.width(windowWidth + diffMouseX);
window.find(".cb").width(windowWidth + diffMouseX - 8);
break;
case "rb":
window.width(windowWidth + diffMouseX).height(
windowHeight + diffMouseY);
window.find(".rc").height(windowHeight + diffMouseY - 8);
window.find(".cb").width(windowWidth + diffMouseX - 8);
break;
case "cb":
window.height(windowHeight + diffMouseY);
window.find(".rc").height(windowHeight + diffMouseY - 8);
break;
}
currentMousePoint.x = event.clientX;
currentMousePoint.y = event.clientY;
}
function moveUp() {
currentMoveType = "";
$(".move_helper").css("z-index", -1);
}
function moveOver(index){
$(".move_helper").attr({"id":"move_helper_"+index,"onmousemove":"moveWindow('box_move_helper_"+index+"',event);"});
}
$(function(){
moveOver(1);
});
</script>
</head>
<body>
<div class="move_helper" onmouseup="moveUp()"></div>
<c:forEach begin="1" end="5" varStatus="index">
<div style="display: block; overflow: hidden; zoom: 1;float: left;">
<div class="box2" id="box_move_helper_${index.count }" style="width:200px;height:300px;">
<div class="rc" onmousedown="moveClick('rc',event,'move_helper_${index.count }','${index.count }');" onmouseup="moveUp()" ></div>
<div class="cb" onmousedown="moveClick('cb',event,'move_helper_${index.count }','${index.count }');" onmouseup="moveUp()" ></div>
<div id="moduleBox_${index.count }" style="width: 100%; height: 100%;">
${index.count }
</div>
</div>
</div>
</c:forEach>
</body>
</html>
.con {
padding-top: 5px;
}
.rc,.lb,.cb,.rb {
position: absolute;
left: 0;
top: 0;
width: 5px;
height: 5px;
}
.rc {
height: 100%;
top: 5px;
}
.cb {
left: 5px;
width: 100%;
}
.rc,.rb {
right: 0;
left: auto;
}
.lb,.cb,.rb {
top: auto;
bottom: 0;
}
.cb {
cursor: n-resize;
}
.rc {
cursor: w-resize;
}
中间省略的样式， 展开
若以下回答无法解决问题，邀请你更新回答
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
