200分像163博客首页那样的可以随意拖动的程序

200分求一个像163博客首页那样的可以随意拖动的程序！
我半年前看过这样的一个网站，知道这个程序原来是国外的一个程序，哪位知道有这个程序下载的，当然最好是中文版或者汉化的，没有英文版也行。我两百分送上，不够另开一贴给分。

[解决办法]
帮顶
[解决办法]
JS 的内容.

设置 DOM onMouseDown 事件.开始拖动.(拖动时改变DOM的位置)

这是原理

现在很多JS Framework 都可以干这些事.

http://jquery.com 很多这类的插件....
[解决办法]
你的邮箱是什么，我发个代码给你看一下，是不是你想要的
[解决办法]
asp.net ajax 或webpart就可以了...或自己写js控制也行...
[解决办法]
jiaoke() 麻烦给我发一份 zxq_ch@163.com
[解决办法]
路过
[解决办法]
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 src= "xmlhttp.js " language= "javascript " type= "text/javascript "> </script>
<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>
<script language= "javascript " >
function init()

{

readrss( 'http://singlepine.cnblogs.com/category/37642.html/rss ', 'div10 ');
readrss( 'http://singlepine.cnblogs.com/category/37639.html/rss ', 'div2 ');
readrss( 'http://singlepine.cnblogs.com/category/41822.html/rss ', 'div5 ');
readrss( 'http://singlepine.cnblogs.com/category/37474.html/rss ', 'div3 ');
readrss( 'http://singlepine.cnblogs.com/category/37630.html/rss ', 'div4 ');
setTimeout( "init() ", "1000 ");
}
</script>
</head>
<body onLoad= "init() ">
<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> AJAX </td>
</tr>
<tr>
<td id= "div4 "> </td>
<tr>
</table>
<table border=0 class= "dragTable " cellspacing= "0 ">
<tr>
<td> datagrid </td>
</tr>
<tr>
<td id= "div5 "> </td>
<tr>
</table>
<table border=0 class= "dragTable " cellspacing= "0 ">
<tr>
<td> asp.net </td>
</tr>
<tr>
<td id= "div3 "> </td>
<tr>
</table> </td>
<td width= "25% ">
<table border=0 class= "dragTable " cellspacing= "0 ">
<tr>
<td> C#.net </td>
</tr>
<tr>
<td id= "div2 " > </td>

<tr>
</table> </td>
<td width= "25% ">
<table border=0 class= "dragTable " cellspacing= "0 " id= "td3 ">
<tr>
<td > javascrip <a href= "# " onClick= "document.all.td3.style.display= 'none ' " onMouseDown= "document.all.imag1.src= 'Icon2.gif ' " onMouseUp= "document.all.imag1.src= 'Icon.gif ' " onFocus= "this.blur() " > <img src= "Icon.gif " width= "16 " height= "14 " id= "imag1 " border= "0 "> </a> </td>
</tr>
<tr>
<td id= "dv " > <div id= "div10 " onClick= "readrss( 'http://singlepine.cnblogs.com/category/37642.html/rss ', 'dv '); "> </div> </td>
<tr>
</table>
</td>
</tr>
</table>
<a href= "# " onClick= "div10.style.display= 'none ' "> 隐藏 </a>
</body>
</html>

JS部分

// JavaScript Document
function echo(obj1,html)
{
$(obj1).innerHTML=html;
}
function $(id)
{
return document.getElementById(id);
}
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP ");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function parseResults(obj1) {
var results = xmlHttp.responseXML;
var item = null;
var title;
var items = results.getElementsByTagName( "item ");
for(var i = 0; i < items.length; i++) {
item = items[i];
title = item.getElementsByTagName( "title ")[0].firstChild.nodeValue;
//clearPreviousResults();
link2=item.getElementsByTagName( "link ")[0].firstChild.nodeValue;
title=str(title);
addListRow(title,link2,obj1);
}
}

function readrss(url,obj)
{

createXMLHttpRequest()
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open( "GET ", url, true);
xmlHttp.send(null);
//xmlHttp.abort();
function handleStateChange()
{
if(xmlHttp.readyState==2)
{
echo(obj, "正在提交数据，请稍等...... ");

}
else if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
//echo(obj, "正在提交数据，请稍等...... ");
clearPreviousResults(obj);
parseResults(obj);

}
}
}
}

function addListRow(test,link1,obj2)
{
//clearPreviousResults(obj2);
$(obj2).innerHTML+= ' <a href= " '+link1+ ' " target= "_blank " > '+test+ ' </a> <br> ';

}
function str(stri)
{
var strb;
if(stri.length> 30)
{
strb=stri.substring(0,30)+ '.. ';
}
else
{
strb=stri;
}
return strb;
}
function clearPreviousResults(obj3) {

while($(obj3).childNodes.length > 0) {
$(obj3).removeChild($(obj3).childNodes[0]);
}
}
[解决办法]
另外还有2张图那无关紧要的了~
[解决办法]
WebParts 部件即可实现此功能
[解决办法]
webpart
------解决方案--------------------

是不是这样的：
<style>
body,td,a {font-size:9pt;color:black;text-decoration:none}
.normal {padding:2px} .up {padding:1px;border:#999999 1px solid;background:#cccccc}
.down {padding:1px;border:dbdbdb 1px solid;background:dbdbdb}
</style>
<body onmousemove= "move() ">
<div style= "position:absolute;z-index:1;width:1;height:1; left: 100; top: 100 " ID=plane onmousedown= "down=true;divleft=event.clientX-parseInt(plane.style.left);divtop=event.clientY-parseInt(plane.style.top) " onmouseup= "down=false ">

<table id= "td123 " cellspacing=2 width=200 border=0 style= "BORDER:#999999 1px solid;cursor:hand " cellpadding= "0 " bgcolor= "f4f4f4 ">
<tr>
<td bgcolor= "#cccccc " height= "20 " style= "BORDER:#999999 1px solid;cursor:move ">
<div align= "center "> 透明的菜单 </div>
</td>
</tr>

<tr>
<td class=normal onMouseDown= "this.className= 'down ' "
onMouseOver= "this.className= 'up ',high(this),menu1.style.visibility= 'visible ' " onMouseOut= "this.className= 'normal ',low(this),menu1.style.visibility= 'hidden ' " style= "filter:alpha(opacity=50) "onMouseUp= "this.className= 'up ' " >
<div align= "right "> 有下级菜单> > </div>

</td>
</tr>
<tr>
<td class=normal onMouseDown= "this.className= 'down ' "
onMouseOver= "this.className= 'up ',high(this),menu2.style.visibility= 'visible ' " onMouseOut= "this.className= 'normal ',low(this),menu2.style.visibility= 'hidden ' " style= "filter:alpha(opacity=50) "onMouseUp= "this.className= 'up ' " >
<div align= "right "> 有下级菜单> > </div>
</td>
</tr>
<tr>
<td class=normal onMouseDown= "this.className= 'down ' "
onMouseOver= "this.className= 'up ',high(this) " onMouseOut= "this.className= 'normal ',low(this) " style= "filter:alpha(opacity=50) "onMouseUp= "this.className= 'up ' ">
<div align= "right "> 无下级菜单> > </div>
</td>
</tr>
<tr>
<td class=normal onMouseDown= "this.className= 'down ' "
onMouseOver= "this.className= 'up ',high(this) " onMouseOut= "this.className= 'normal ',low(this) " style= "filter:alpha(opacity=50) "onMouseUp= "this.className= 'up ' ">
<div align= "right "> 无下级菜单> > </div>
</td>
</tr>
<tr> <td> <a href= "# "> lianjie </a> </td> </tr>
</table>
<script language= "JavaScript ">

</script>
<script language= "javascript ">
<!--
function high(image)
{
theobject=image
highlighting=setInterval ( "highlightit(theobject) ",100)
}
function low(image)
{
clearInterval(highlighting)

image.filters.alpha.opacity=50
}
function highlightit(cur2)
{
if (cur2.filters.alpha.opacity <100)
cur2.filters.alpha.opacity+=20
else if (window.highlighting)
clearInterval (highlighting)
}
//-->
</script>
<script>
var over=false,down=false,divleft,divtop;
function move(){
if(down){
plane.style.left=event.clientX-divleft;
plane.style.top=event.clientY-divtop;
}
}
</script>
<div id= "menu2 " style= "position:absolute;top:45px;left:96; z-index:1; visibility: hidden; width: 105 "
onMouseOver=this.style.visibility= 'visible '
onMouseOut=this.style.visibility= 'hidden '>
<table cellspacing=2 width=100 border=0 style= "BORDER:#999999 1px solid;cursor:hand " cellpadding= "0 " bgcolor= "f4f4f4 " align= "right ">
<tr>
<td class=normal onMouseDown= "this.className= 'down ' "
onMouseOver= "this.className= 'up ',high(this) " onMouseOut= "this.className= 'normal ',low(this) " style= "filter:alpha(opacity=50) "onMouseUp= "this.className= 'up ' ">
<div align= "center "> 子菜单 </div>
</td>
</tr>
<tr>
<td class=normal onMouseDown= "this.className= 'down ' "
onMouseOver= "this.className= 'up ',high(this) " onMouseOut= "this.className= 'normal ',low(this) " style= "filter:alpha(opacity=50) "onMouseUp= "this.className= 'up ' ">
<div align=center> 子菜单 </div>
</td>
</tr>
<tr>
<td class=normal onMouseDown= "this.className= 'down ' "
onMouseOver= "this.className= 'up ',high(this) " onMouseOut= "this.className= 'normal ',low(this) " style= "filter:alpha(opacity=50) "onMouseUp= "this.className= 'up ' ">
<div align=center> 子菜单 </div>
</td>
</tr>
<tr>
<td class=normal onMouseDown= "this.className= 'down ' "
onMouseOver= "this.className= 'up ',high(this) " onMouseOut= "this.className= 'normal ',low(this) " style= "filter:alpha(opacity=50) "onMouseUp= "this.className= 'up ' ">
<div align=center> 子菜单 </div>
</td>
</tr>
</table>
</div>
<div id= "menu1 " style= "position:absolute;top:24px;left:96px; z-index:1; visibility: hidden; width: 105 "
onMouseOver=this.style.visibility= 'visible '
onMouseOut=this.style.visibility= 'hidden '>
<table cellspacing=2 width=100 border=0 style= "BORDER:#999999 1px solid;cursor:hand " cellpadding= "0 " bgcolor= "f4f4f4 " align= "right ">
<tr>
<td class=normal onMouseDown= "this.className= 'down ' "
onMouseOver= "this.className= 'up ',high(this) " onMouseOut= "this.className= 'normal ',low(this) " style= "filter:alpha(opacity=50) "onMouseUp= "this.className= 'up ' ">

<div align= "center "> 子菜单 </div>
</td>
</tr>
<tr>
<td class=normal onMouseDown= "this.className= 'down ' "
onMouseOver= "this.className= 'up ',high(this) " onMouseOut= "this.className= 'normal ',low(this) " style= "filter:alpha(opacity=50) "onMouseUp= "this.className= 'up ' ">
<div align=center> 子菜单 </div>
</td>
</tr>
<tr>
<td class=normal onMouseDown= "this.className= 'down ' "
onMouseOver= "this.className= 'up ',high(this) " onMouseOut= "this.className= 'normal ',low(this) " style= "filter:alpha(opacity=50) "onMouseUp= "this.className= 'up ' ">
<div align=center> 子菜单 </div>
</td>
</tr>
<tr>
<td class=normal onMouseDown= "this.className= 'down ' "
onMouseOver= "this.className= 'up ',high(this) " onMouseOut= "this.className= 'normal ',low(this) " style= "filter:alpha(opacity=50) "onMouseUp= "this.className= 'up ' ">
<div align=center> 子菜单 </div>
</td>
</tr>
</table>
</div>
</div>
[解决办法]
http://community.csdn.net/Expert/TopicView3.asp?id=5574016

不知道楼主说的是不是这个.163的我没有看见有拖到的..
[解决办法]
JS+WebPart
实现拖拽menu
帮顶+JF
[解决办法]
希望这个DEMO能给楼主一些启发
http://www.cnblogs.com/ericfine/archive/2007/06/30/801563.html

200分像163博客首页那样的可以随意拖动

热点推荐