javascript 拖动层的有关问题
日期：2014-05-16 浏览次数：20375 次
javascript 拖动层的问题
我用DIV做了一个对话框效果，有标题和内容，我现在想鼠标按住标题可以拖动，而按住其它地方不能拖动，这个要怎么实现，搜了好多方法都没能实现！请各位帮忙！
<div id= "dMsgBody ">
<div id= "dTitle "> 这是标题，拖动这里可以实现拖动效果 </div>
<div id= "dTxtBody "> 这是正文，拖动这里不可以实现拖协效果 </div>
</div>
按住标题使整个层（dMsgBody）都动，不光是标题,dMsgBody是绝对位置，其它是相对位置
------解决方案--------------------
<html>
<head>
</head>
<body>
<div id= "dMsgBody " style= "border:1px solid;position:absolute ">
<div id= "dTitle " style= "background-color:#CCCCCC "> 这是标题，拖动这里可以实现拖动效果 </div>
<div id= "dTxtBody "> 这是正文，拖动这里不可以实现拖协效果 </div>
</div>
</body>
<script language= "javascript ">
var isDrag = false;
var objX;
var objY;
var obj = document.getElementById( "dMsgBody ");
var objTitle = document.getElementById( "dTitle ");
window.onload = startUp;
function startUp(){
document.onmousemove = mousemove;
objTitle.onmousedown = mousedown;
document.onmouseup = mouseup;
}
function mousemove(){
if(isDrag){
obj.style.pixelTop = event.clientY - objY;
obj.style.pixelLeft = event.clientX - objX;
}
}
function mousedown(){
isDrag = true;
objX = event.offsetX;
objY = event.offsetY;
}
function mouseup(){
if(isDrag){
isDrag = false;
}
}
</script>
</html>
------解决方案--------------------
直接用yui吧两行代码就可以了,还不用考虑浏览器的问题
------解决方案--------------------
mbx615(白天鬼混挣钱，晚上挣钱鬼混)的方法在ie下很好但在firefox下不行
我用DIV做了一个对话框效果，有标题和内容，我现在想鼠标按住标题可以拖动，而按住其它地方不能拖动，这个要怎么实现，搜了好多方法都没能实现！请各位帮忙！
<div id= "dMsgBody ">
<div id= "dTitle "> 这是标题，拖动这里可以实现拖动效果 </div>
<div id= "dTxtBody "> 这是正文，拖动这里不可以实现拖协效果 </div>
</div>
按住标题使整个层（dMsgBody）都动，不光是标题,dMsgBody是绝对位置，其它是相对位置
------解决方案--------------------
<html>
<head>
</head>
<body>
<div id= "dMsgBody " style= "border:1px solid;position:absolute ">
<div id= "dTitle " style= "background-color:#CCCCCC "> 这是标题，拖动这里可以实现拖动效果 </div>
<div id= "dTxtBody "> 这是正文，拖动这里不可以实现拖协效果 </div>
</div>
</body>
<script language= "javascript ">
var isDrag = false;
var objX;
var objY;
var obj = document.getElementById( "dMsgBody ");
var objTitle = document.getElementById( "dTitle ");
window.onload = startUp;
function startUp(){
document.onmousemove = mousemove;
objTitle.onmousedown = mousedown;
document.onmouseup = mouseup;
}
function mousemove(){
if(isDrag){
obj.style.pixelTop = event.clientY - objY;
obj.style.pixelLeft = event.clientX - objX;
}
}
function mousedown(){
isDrag = true;
objX = event.offsetX;
objY = event.offsetY;
}
function mouseup(){
if(isDrag){
isDrag = false;
}
}
</script>
</html>
------解决方案--------------------
直接用yui吧两行代码就可以了,还不用考虑浏览器的问题
------解决方案--------------------
mbx615(白天鬼混挣钱，晚上挣钱鬼混)的方法在ie下很好但在firefox下不行
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
