javascript 拖动层的问题

miaomiao_0316 2007-08-28 11:44:30

我用DIV做了一个对话框效果，有标题和内容，我现在想鼠标按住标题可以拖动，而按住其它地方不能拖动，这个要怎么实现，搜了好多方法都没能实现！请各位帮忙！
<div id="dMsgBody">
<div id="dTitle">这是标题，拖动这里可以实现拖动效果</div>
<div id="dTxtBody">这是正文，拖动这里不可以实现拖协效果</div>
</div>

按住标题使整个层（dMsgBody）都动，不光是标题,dMsgBody是绝对位置，其它是相对位置

...全文

308 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

mbx615 2007-08-28

打赏
举报

<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>

miaomiao_0316 2007-08-28

打赏
举报

mbx615(白天鬼混挣钱，晚上挣钱鬼混)谢谢你，你提供的方法实现了我要的功能，但不是很完美，比如拖动时文字会被选中等，在你的代码的基础上结合别的代码，我把它稍加改造了一下，比如增加了是否随滚动条滚动，防止拖动文字被选中等，如下：

var isDrag = false;
var objX,objY;
var obj,objTitle;
var iScroll; //是否让层随滚动条的滚动而滚，1表是滚动
function startUp(obj1,obj2,s){
obj = document.getElementById(obj1);
objTitle = document.getElementById(obj2);
iScroll = s;
obj.orig_x = parseInt(obj.style.left) - document.body.scrollLeft;
obj.orig_y = parseInt(obj.style.top) - document.body.scrollTop;

objTitle.onmousedown = function(){
isDrag = true;
this.style.cursor = "move";;
objX = window.event.clientX + document.body.scrollLeft - obj.offsetLeft;
objY = window.event.clientY + document.body.scrollTop - obj.offsetTop;

document.ondragstart = "return false;"
document.onselectstart = "return false;"
document.onselect = "document.selection.empty();"

if(obj.setCapture){
obj.setCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
}

document.onmousemove = function(){
if(isDrag){
obj.style.left = window.event.clientX + document.body.scrollLeft - objX;
obj.style.top = window.event.clientY + document.body.scrollTop - objY;

obj.orig_x = parseInt(obj.style.left) - document.body.scrollLeft;
obj.orig_y = parseInt(obj.style.top) - document.body.scrollTop;
}
}

document.onmouseup = function(){
if(isDrag){
isDrag = false;
}
if(obj.releaseCapture){
obj.releaseCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
//document.onmousemove = null;
//document.onmouseup = null;
document.ondragstart = null;
document.onselectstart = null;
document.onselect = null;
objTitle.style.cursor = "normal";
}

if(iScroll){
var orig_scroll = window.onscroll?window.onscroll:function (){};
window.onscroll = function (){
orig_scroll();
obj.style.left = obj.orig_x + document.body.scrollLeft;
obj.style.top = obj.orig_y + document.body.scrollTop;
}
}
}