求js拖动选项卡排序

这是个上下移动的  我要左右移动的 就QQ迷你页上的选项卡那样移动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript实现可通过拖拽进行重排的文章列表 - 分享JavaScript-cnzzad.com</title>
<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin:0px;
padding:0px;
background-image:url('http://www.cnzzad.com/images/logo.gif');
background-repeat:no-repeat;
padding-top:85px;
overflow:hidden;
padding-left:10px;
-moz-user-select:no;
}/* Don't change these options */
#movableNode{
position:absolute;
}#arrDestInditcator{
position:absolute;
display:none;
width:100px;
}
/* End options that shouldn't be changed */#arrangableNodes,#movableNode ul{
padding-left:0px;
margin-left:0px;
margin-top:0px;
padding-top:0px;
}#arrangableNodes li,#movableNode li{
list-style-type:none;
cursor:default;
}
</style><script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, October 2005
Download from cnzzad.com
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.Thank you!www.dhtmlgoodies.com
Alf Magne Kalleland************************************************************************************************************/var offsetYInsertDiv = -3; // Y offset for the little arrow indicating where the node should be inserted.
if(!document.all)offsetYInsertDiv = offsetYInsertDiv - 7; // No IEvar arrParent = false;
var arrMoveCont = false;
var arrMoveCounter = -1;
var arrTarget = false;
var arrNextSibling = false;
var leftPosArrangableNodes = false;
var widthArrangableNodes = false;
var nodePositionsY = new Array();
var nodeHeights = new Array();
var arrInsertDiv = false;
var insertAsFirstNode = false;
var arrNodesDestination = false;
function cancelEvent()
{
return false;
}
function getTopPos(inputObj)
{ var returnValue = inputObj.offsetTop;
 while((inputObj = inputObj.offsetParent) != null){
 returnValue += inputObj.offsetTop;
 }
 return returnValue;
}function getLeftPos(inputObj)
{
 var returnValue = inputObj.offsetLeft;
 while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
 return returnValue;
}function clearMovableDiv()
{
if(arrMoveCont.getElementsByTagName('LI').length>0){
if(arrNextSibling)arrParent.insertBefore(arrTarget,arrNextSibling); else arrParent.appendChild(arrTarget);
}}function initMoveNode(e)
{
clearMovableDiv();
if(document.all)e = event;
arrMoveCounter = 0;
arrTarget = this;
if(this.nextSibling)arrNextSibling = this.nextSibling; else arrNextSibling = false;
timerMoveNode();
arrMoveCont.parentNode.style.left = e.clientX + 'px';
arrMoveCont.parentNode.style.top = e.clientY + 'px';
return false;}
function timerMoveNode()
{
if(arrMoveCounter>=0 && arrMoveCounter<10){
arrMoveCounter = arrMoveCounter +1;
setTimeout('timerMoveNode()',20);
}
if(arrMoveCounter>=10){
arrMoveCont.appendChild(arrTarget);
}
}function arrangeNodeMove(e)
{
if(document.all)e = event;
if(arrMoveCounter<10)return;
if(document.all && arrMoveCounter>=10 && e.button!=1 && navigator.userAgent.indexOf('Opera')==-1){
arrangeNodeStopMove();
}arrMoveCont.parentNode.style.left = e.clientX + 'px';
arrMoveCont.parentNode.style.top = e.clientY + 'px';var tmpY = e.clientY;
arrInsertDiv.style.display='none';
arrNodesDestination = false;if(e.clientX<leftPosArrangableNodes || e.clientX>leftPosArrangableNodes + widthArrangableNodes)return; var subs = arrParent.getElementsByTagName('LI');
for(var no=0;no<subs.length;no++){
var topPos =getTopPos(subs[no]);
var tmpHeight = subs[no].offsetHeight;if(no==0){
if(tmpY<=topPos && tmpY>=topPos-5){
arrInsertDiv.style.top = (topPos + offsetYInsertDiv) + 'px';
arrInsertDiv.style.display = 'block';
arrNodesDestination = subs[no];
insertAsFirstNode = true;
return;
}
}if(tmpY>=topPos && tmpY<=(topPos+tmpHeight)){
arrInsertDiv.style.top = (topPos+tmpHeight + offsetYInsertDiv) + 'px';
arrInsertDiv.style.display = 'block';
arrNodesDestination = subs[no];
insertAsFirstNode = false;
return;
}
}
}function arrangeNodeStopMove()
{
arrMoveCounter = -1; 
arrInsertDiv.style.display='none';if(arrNodesDestination){
var subs = arrParent.getElementsByTagName('LI');
if(arrNodesDestination==subs[0] && insertAsFirstNode){
arrParent.insertBefore(arrTarget,arrNodesDestination);
}else{
if(arrNodesDestination.nextSibling){
arrParent.insertBefore(arrTarget,arrNodesDestination.nextSibling);
}else{
arrParent.appendChild(arrTarget);
}
}
}
arrNodesDestination = false;
clearMovableDiv();
}
/*
function saveArrangableNodes()
{
var nodes = arrParent.getElementsByTagName('LI');
var string = "";
for(var no=0;no<nodes.length;no++){
if(string.length>0)string = string + ',';
string = string + nodes[no].id;
}document.forms[0].hiddenNodeIds.value = string;// Just for testing
document.getElementById('arrDebug').innerHTML = 'Ready to save these nodes:<br>' + string.replace(/,/g,',<BR>');// document.forms[0].submit(); // Remove the comment in front of this line when you have set an action to the form.}*/function initArrangableNodes()
{arrParent = document.getElementById('arrangableNodes');
arrMoveCont = document.getElementById('movableNode').getElementsByTagName('UL')[0];
arrInsertDiv = document.getElementById('arrDestInditcator');leftPosArrangableNodes = getLeftPos(arrParent);
arrInsertDiv.style.left = leftPosArrangableNodes - 5 + 'px';
widthArrangableNodes = arrParent.offsetWidth;var subs = arrParent.getElementsByTagName('LI');
for(var no=0;no<subs.length;no++){
subs[no].onmousedown = initMoveNode;
subs[no].onselectstart = cancelEvent;
}document.documentElement.onmouseup = arrangeNodeStopMove;
document.documentElement.onmousemove = arrangeNodeMove;
document.documentElement.onselectstart = cancelEvent;
document.getElementById('arrDebug').innerHTML='initArrangableNodes';
}window.onload = initArrangableNodes;</script></head>
<body>
<H1>Arrange the nodes below</H1>
<ul id="arrangableNodes">
<li id="node1">Node no. 1</li>
<li id="node2">Node no. 2</li>
<li id="node3">Node no. 3</li>
<li id="node4">Node no. 4</li>
<li id="node5">Node no. 5</li>
<li id="node6">Node no. 6</li>
<li id="node7">Node no. 7</li>
<li id="node8">Node no. 8</li>
<li id="node9">Node no. 9</li>
<li id="node10">Node no. 10</li>
<li id="node11">Node no. 11</li>
<li id="node12">Node no. 12</li>
<li id="node13">Node no. 13</li>
<li id="node14">Node no. 14</li>
<li id="node15">Node no. 15</li>
</ul>
<p></p>
<div id="movableNode"><ul></ul></div>
<div id="arrDestInditcator"><img src="http://www.cnzzad.com/photo/tx/css/insert.gif"></div>
</body>
</html>

解决方案 »

  1.   

    LZ可以用jQuery的UI
    http://jqueryui.com/demos/sortable/#portlets
      

  2.   

    仿QQ迷你首页的左右滚动Tab选项卡，只是实现了关键的左右滚动，
    至于选项卡可以修改一下，这里主要是发出大家比较关注的左右控制滚动。 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>滚动Tab-www.codefans.net</title>
    <style type="text/css">
    div#box{
    float:left;
    }
    div#box span{
    display:block;
    cursor:pointer;
    width:24px;
    height:24px;
    }
    div#box span#left{
    float:left;
    background:transparent url(http://mat1.qq.com/mini2009/images/youhua/all2008.gif) no-repeat scroll left -82px;
    }
    div#box span#right{
    float:left;
    background:transparent url(http://mat1.qq.com/mini2009/images/youhua/all2008.gif) no-repeat scroll -384px -82px;
    }
    div#qqmini{
    float:left;
    width:345px;
    overflow:hidden;
    }
    ul{
    margin:0px;
    float:left;
    width:9999px;
    overflow:hidden;
    margin-left:-2.5em;
    *margin-left:-1px;
    }
    li{
    list-style-type:none;
    float:left;
    background:transparent url(http://mat1.qq.com/mini2009/images/youhua/all2008.gif) no-repeat scroll 0 -31px;
    width:69px;
    height:18px;
    padding-top:5px;
    text-align:center;
    cursor:pointer;
    }
    </style>
    </head>
    <body>
    <div id="box">
    <span id="left"><a href="javascript:void(0)"></a></span>
    <div id="qqmini">
    <UL>
    <LI>新闻</LI>
    <LI>财经</LI>
    <LI>娱乐</LI>
    <LI>体育</LI>
    <LI>汽车</LI>
    <LI>读书</LI>
    <LI>博客</LI>
    <LI>游戏</LI>
    </UL>
    </div>
    <span id="right"><a href="javascript:void(0)"></a></span>
    </div>
    <script type="text/javascript">
    function $(e){
    return typeof e == 'string'?document.getElementById(e):e;
    }
    var Event={
    add:function (obj,EventType,fn){
    if (obj.attachEvent){
    obj['e'+EventType+fn] = fn;
    obj[EventType+fn] = function() {obj['e'+EventType+fn](window.event);}
    obj.attachEvent('on'+EventType,obj[EventType+fn]);
    }else if(obj.addEventListener){
    obj.addEventListener(EventType,fn,false);
    }else {
    obj['on'+EventType]=fn;
    }
    }
    ,
    remove:function(obj,EventType,fn){
    if (obj.detachEvent){
    obj.detachEvent('on'+EventType,obj[EventType+fn]);
    }else if(obj.removeEventListener){
    obj.removeEventListener(EventType,fn,false);
    }else {
    obj['on'+EventType]=null;
    }

    }
    }
    function set(l,r,c,offset){
    Event.add(l,'click',function (){c.scrollLeft-=offset});
    Event.add(r,'click',function (){c.scrollLeft+=offset});
    }
    set($('left'),$('right'),$('qqmini'),69);
    </script>
    </body>
    </html>
      

  3.   

    http://www.cnblogs.com/flysnow-z/archive/2009/04/15/1436652.html
      

  4.   

    http://www.google.cn/search?hl=zh-CN&newwindow=1&q=%E9%80%89%E9%A1%B9%E5%8D%A1++%E6%8B%96%E5%8A%A8&meta=&aq=f&oq=