87,917
社区成员
发帖
与我相关
我的任务
分享可拖动层的css问题
<script language="javascript">
function $(_sId){return document.getElementById(_sId);}
function moveStart (event, _sId){
var oObj = $(_sId);
oObj.onmousemove = mousemove;
oObj.onmouseup = mouseup;
oObj.setCapture ? oObj.setCapture() : function(){};
oEvent = window.event ? window.event : event;
var dragData = {x : oEvent.clientX, y : oEvent.clientY};
var backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)};
function mousemove(){
var oEvent = window.event ? window.event : event;
var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);
oObj.style.left = iLeft;
oObj.style.top = iTop;
dragData = {x: oEvent.clientX, y: oEvent.clientY};
}
function mouseup(){
var oEvent = window.event ? window.event : event;
oObj.onmousemove = null;
oObj.onmouseup = null;
if(oEvent.clientX < 1 || oEvent.clientY < 1 || oEvent.clientX > document.body.clientWidth || oEvent.clientY > document.body.clientHeight){
oObj.style.left = backData.y;
oObj.style.top = backData.x;
}
oObj.releaseCapture ? oObj.releaseCapture() : function(){};
}
}
</script>
<style type="text/css">
#mov{
position:absolute;height:50px;width:300px;background-color:#FF33ff;top:20px;left:100px;
}
</style>
<BODY onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y">
<div id="mov" style="position:absolute;height:50px;width:300px;background-color:#FF33ff;top:20px;left:100px;" onMouseDown="javascript:moveStart(event,'mov');"></div>
这段是可拖动层的代码，但是，在div内用style属性可以使用，但使用css样式就不行，不知道是怎么回事？
</BODY>
function $(_sId){return document.getElementById(_sId);}
function moveStart (event, _sId){
var oObj = $(_sId);
oObj.onmousemove = mousemove;
oObj.onmouseup = mouseup;
oObj.setCapture ? oObj.setCapture() : function(){};
oEvent = window.event ? window.event : event;
var dragData = {x : oEvent.clientX, y : oEvent.clientY};
var backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)};
function mousemove(){
var oEvent = window.event ? window.event : event;
var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);
oObj.style.left = iLeft;
oObj.style.top = iTop;
dragData = {x: oEvent.clientX, y: oEvent.clientY};
}
function mouseup(){
var oEvent = window.event ? window.event : event;
oObj.onmousemove = null;
oObj.onmouseup = null;
if(oEvent.clientX < 1 || oEvent.clientY < 1 || oEvent.clientX > document.body.clientWidth || oEvent.clientY > document.body.clientHeight){
oObj.style.left = backData.y;
oObj.style.top = backData.x;
}
oObj.releaseCapture ? oObj.releaseCapture() : function(){};
}
}
</script>
<style type="text/css">
#mov{
position:absolute;height:50px;width:300px;background-color:#FF33ff;top:20px;left:100px;
}
</style>
<BODY onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y">
<div id="mov" style="position:absolute;height:50px;width:300px;background-color:#FF33ff;top:20px;left:100px;" onMouseDown="javascript:moveStart(event,'mov');"></div>
这段是可拖动层的代码，但是，在div内用style属性可以使用，但使用css样式就不行，不知道是怎么回事？
</BODY>
...全文
请发表友善的回复…
发表回复
