求一个拖动层的例子
不要太复杂,越简单越好
要求如下
<div id= "father ">
<div id= "child1 "> </div> //该层可以响应拖动事件并拖动整个father层
<div id= "child2 "> </div> //该层需要被带动一起拖动
</div>
实际就是要一个层窗口,
标题区域和内容区域,鼠标在内容区域不可以拖动,鼠标在标题区域可以拖动整个窗口,其中father代表了整个窗口,child1代表了标题区域,child2表示内容区域,
!在此基础上改就行
<script language= "javascript ">
var mouse_x,obj_x,mouse_y,obj_y
var obj_moveable=false;
//开始拖动层
function startDrag(obj){
mouse_x = event.clientX;
mouse_y = event.clientY;
obj_x=parseInt(obj.style.left);
obj_y=parseInt(obj.style.top);
obj.setCapture();
obj_moveable=true;
}
//拖动
function drag(obj) {
if(obj_moveable && event.button==1) {
obj.style.pixelLeft =obj_x+(event.clientX-mouse_x) ;
obj.style.pixelTop =obj_y+(event.clientY-mouse_y) ;
}
}
//停止拖动
function stopDrag(obj){
obj.releaseCapture();
obj_moveable=false;
}
</script>
<div id= "father "
onmousedown= "startDrag(this) "
onmouseup= "stopDrag(this) "
onmousemove= "drag(this) " >
<div> 标题,鼠标在此可以拖动整个窗口 </div>
<div> 内容 </div>
</div>
[解决办法]
提供一个参考例子（将以下代码存成HTML看）：
<html>
<head>
<title> DRAG the DIV </title>
<style>
*{font-size:12px}
.dragTable{
font-size:12px;
border-top:1px solid #3366cc;
margin-bottom: 10px;
width:100%;
background-color:#FFFFFF;
}
.dragTR{
cursor:move;
color:#7787cc;
background-color:#e5eef9;
}
td{vertical-align:top;}
#parentTable{
border-collapse:collapse;
letter-spacing:25px;
}
</style>
<script defer>
var draged=false;
tdiv=null;
function dragStart(){
ao=event.srcElement;
if((ao.tagName== "TD ")||(ao.tagName== "TR "))ao=ao.offsetParent;
else return;
draged=true;
tdiv=document.createElement( "div ");
tdiv.innerHTML=ao.outerHTML;
tdiv.style.display= "block ";
tdiv.style.position= "absolute ";
tdiv.style.filter= "alpha(opacity=70) ";
tdiv.style.cursor= "move ";
tdiv.style.width=ao.offsetWidth;
tdiv.style.height=ao.offsetHeight;
tdiv.style.top=getInfo(ao).top;
tdiv.style.left=getInfo(ao).left;
document.body.appendChild(tdiv);
lastX=event.clientX;
lastY=event.clientY;
lastLeft=tdiv.style.left;
lastTop=tdiv.style.top;
try{
ao.dragDrop();
}catch(e){}
}
function draging(){//重要:判断MOUSE的位置
if(!draged)return;
var tX=event.clientX;
var tY=event.clientY;
tdiv.style.left=parseInt(lastLeft)+tX-lastX;
tdiv.style.top=parseInt(lastTop)+tY-lastY;
for(var i=0;i <parentTable.cells.length;i++){
var parentCell=getInfo(parentTable.cells[i]);
if(tX> =parentCell.left&&tX <=parentCell.right&&tY> =parentCell.top&&tY <=parentCell.bottom){
var subTables=parentTable.cells[i].getElementsByTagName( "table ");
if(subTables.length==0){
if(tX> =parentCell.left&&tX <=parentCell.right&&tY> =parentCell.top&&tY <=parentCell.bottom){
parentTable.cells[i].appendChild(ao);
}
break;
}
for(var j=0;j <subTables.length;j++){
var subTable=getInfo(subTables[j]);
if(tX> =subTable.left&&tX <=subTable.right&&tY> =subTable.top&&tY <=subTable.bottom){
parentTable.cells[i].insertBefore(ao,subTables[j]);
break;
}else{
parentTable.cells[i].appendChild(ao);
}
}
}
}
}
function dragEnd(){
if(!draged)return;
draged=false;
mm=ff(150,15);
}
function getInfo(o){//取得坐标
var to=new Object();
to.left=to.right=to.top=to.bottom=0;
var twidth=o.offsetWidth;
var theight=o.offsetHeight;
while(o!=document.body){
to.left+=o.offsetLeft;
to.top+=o.offsetTop;
o=o.offsetParent;
}
to.right=to.left+twidth;
to.bottom=to.top+theight;
return to;
}
function ff(aa,ab){//从GOOGLE网站来,用于恢复位置
var ac=parseInt(getInfo(tdiv).left);
var ad=parseInt(getInfo(tdiv).top);
var ae=(ac-getInfo(ao).left)/ab;
var af=(ad-getInfo(ao).top)/ab;
return setInterval(function(){if(ab <1){
clearInterval(mm);
tdiv.removeNode(true);
ao=null;
return
}
ab--;
ac-=ae;
ad-=af;
tdiv.style.left=parseInt(ac)+ "px ";
tdiv.style.top=parseInt(ad)+ "px "
}
,aa/ab)
}
function inint(){//初始化
for(var i=0;i <parentTable.cells.length;i++){
var subTables=parentTable.cells[i].getElementsByTagName( "table ");
for(var j=0;j <subTables.length;j++){
if(subTables[j].className!= "dragTable ")break;
subTables[j].rows[0].className= "dragTR ";
subTables[j].rows[0].attachEvent( "onmousedown ",dragStart);
subTables[j].attachEvent( "ondrag ",draging);
subTables[j].attachEvent( "ondragend ",dragEnd);
}
}
}
inint();
</script>
</head>
<body>
<table border= "0 " cellpadding= "0 " cellspacing= "10 " width= "100% " height=500 id= "parentTable ">
<tr >
<td width= "25% " valgin= "top ">
<table border=0 class= "dragTable " cellspacing= "0 ">
<tr>
<td> <b> GMAIL </b> </td>
</tr>
<tr>
<td> 暂时无法显示GMAIL内容 </td>
<tr>
</table> <table border=0 class= "dragTable " cellspacing= "0 ">
<tr>
<td> 新浪体育 </td>
</tr>
<tr>
<td> 解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角 美加施冷箭 </td>
<tr>
</table> <table border=0 class= "dragTable " cellspacing= "0 ">
<tr>
<td> 焦点 </td>
</tr>
<tr>
<td> 京广线中断4小时20临客返汉晚点
中国新闻网-湖北分社 - 所有 235 相关报道 ?哈马斯已有总理人选
解放日报报业集团 - 所有 489 相关报道 ?陈水扁是两岸关系麻烦制造者
武汉晨报 - 所有 179 相关报道 ? </td>
<tr>
</table>
</td>
<td width= "25% ">
<table border=0 class= "dragTable " cellspacing= "0 ">
<tr>
<td> 中关村在线 </td>
</tr>
<tr>
<td> 新年行情速递 双敏板卡低价推荐 终于等到了，映泰6600GT一降降一百 罗技G15游戏键盘热力促销，代购价仅529元 </td>
<tr>
</table> </td>
<td width= "25% ">
<table border=0 class= "dragTable " cellspacing= "0 ">
<tr>
<td> 网易商业 </td>
</tr>
<tr>
<td> 上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市 </td>
<tr>
</table>
</td>
</tr>
</table>
</body>
</html>
