js 拖动选项卡

< script type = " text/javascript " >
<!--
var  dragname = " Menubox_1 " ;

function  $(obj)
{
    return typeof(obj)=="string"?document.getElementById(obj):obj;
}
window.onload = function () {
    on_ini();
    var menuAs=$(dragname).getElementsByTagName("li");
    for(var i=0; i<menuAs.length; i++)
    {
        drag(menuAs[i]);
    }        
} ;

function  on_ini()
{
    String.prototype.inc=function(s){return this.indexOf(s)>-1?true:false}
    var agent=navigator.userAgent;
    window.isOpr=agent.inc("Opera");
    window.isIE=agent.inc("IE")&&!isOpr;
    window.isMoz=agent.inc("Mozilla")&&!isOpr&&!isIE;
    if(isMoz)
    {
       Event.prototype.__defineGetter__("x",function(){return this.clientX+2});
       Event.prototype.__defineGetter__("y",function(){return this.clientY+2});
    }
    
    basic_ini();
}

function  basic_ini()
{
    //删除节点
    window.oDel=function(obj)
    {
        if($(obj)!=null)
            {
                $(obj).parentNode.removeChild($(obj));
            }
     }
}

function  drag(dv) {
dv.onmousedown=function(e){
       var d=document;
       e = e || window.event;
     
     //左键才可拖动
       if (e.which == null)
          /**//* IE case */
          button= (e.button < 2) ? "LEFT" : ((e.button == 4) ? "MIDDLE" : "RIGHT");
      else
          /**//* All others */
          button= (e.which < 2) ? "LEFT" : ((e.which == 2) ? "MIDDLE" : "RIGHT");
      if(button!="LEFT")
      {
        return false;
      }    
     
      var x= e.layerX || e.offsetX;
       var y= e.layerY || e.offsetY;
     
        dv.xy=getxy(dv);
        dv.mxy=
        {
            "mx":e.clientX-dv.xy.left,
            "my":e.clientY-dv.xy.top
        };//鼠标在对象的内部位置
     
      //设置捕获范围
       if(dv.setCapture){
          dv.setCapture();
       }else if(window.captureEvents){
          window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
       }
       
       //拖动事件是否首次启动  目的：阻止拖动对象上的click事件不被执行
       var dragfirst=true;
      //移动函数
      d.onmousemove=function(e){
           e= e || window.event;
           
        if(dragfirst)//拖动事件启动 首次加载
        {
               //在原有位置添加一个层
               //创建层
                var om=document.createElement("li");
                dv.otemp=om;
                om.style.width=dv.xy.width+"px";
                om.style.height=dv.xy.height+"px";
                om.style.cssText="border: 1px dashed #999999; background-color: #eeeeee;";
                dv.parentNode.insertBefore(om,dv);

               //设置该对象浮动
               dv.style.position="absolute";
               dv.oldcss=dv.className;
               dv.className="touming";
               dv.style.cursor="move";

               dragfirst=false;
        }

           var tx=e.clientX-dv.mxy.mx;//-x;
           var ty=e.clientY-dv.mxy.my;//-y;
           dv.style.position="absolute";
           dv.style.left=tx+"px";
          // dv.style.top=ty+"px";
           
           
              createtmpl(dv,e);
              
        d.onselectstart=function()
        {
            return false
        }
        
    };//end onmousemove
    
    window.onfocus=function()
    {
        document.onmouseup();
    }
    
    window.onblur=function()
    {
        document.onmouseup();
    }
        d.onmouseup=function(){
          //取消捕获范围
            if(dv.releaseCapture){
              dv.releaseCapture();
            }else if(window.captureEvents){
              window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
            }
          if(!dragfirst)
          {
              dv.otemp.parentNode.insertBefore(dv,dv.otemp);
              oDel(dv.otemp);               dv.style.position="";               dv.className=dv.oldcss;       dv.style.cursor="";
           }
          //清除事件
          d.onmousemove=null;          d.onmouseup=null;          d.onselectstart=null;
          window.onblur=null;       window.onfocus=null;
       };//end onmouseup

        
   };
} // end function drag(dv)


     // 比较，挨个层比较
     function  createtmpl(dv,e)
     {
        var menuAs=$(dragname).getElementsByTagName("li");
        //遍历所有可拖动层
        for(var i=0;i<menuAs.length;i++)
        {
            if(menuAs[i]==dv||menuAs[i]==dv.otemp)
                continue;
            var b=inner(menuAs[i],e);
            
            if(b=="no")
                continue;
            
            //在左边
            if(b=="left")
            {
                menuAs[i].parentNode.insertBefore(dv.otemp,menuAs[i]);
            }
            else//在右边
            {
                if(menuAs[i].nextSibling==null)
                     menuAs[i].parentNode.appendChild(dv.otemp);
                else
                     menuAs[i].parentNode.insertBefore(dv.otemp,menuAs[i].nextSibling);
            }
         }
         return false;
    } // end createtemp
    
     function  inner(o,e)
     {
        var a=getxy(o);
        //判断是否在框里
        //if(e.x>a.left && e.x<(a.left+a.width) && e.y>a.top && e.y<(a.top+a.height))   //判断是否在一个矩形里
        if(e.x>a.left && e.x<(a.left+a.width))
        {
            if(e.x<(a.left+a.width/2))
                return "left";
            else
                return "right";
        }
        else
        {
            return "no";
         }
    }

     // 获取拖动层的 位置和大小
     function  getxy(o)
     {
        var t=o.offsetTop;        var l=o.offsetLeft;        var w=o.offsetWidth;        var h=o.offsetHeight;
        while(o=o.offsetParent)
        {
           t+=o.offsetTop;           l+=o.offsetLeft;
        }
        var j=
        {
           "width":w,           "height":h,           "top":t,           "left":l
        };
       return j;
    }
    
// -->
< / script>

 

HTMl:

 

< div  id ="Menubox_1" >
   < ul >
     < li >< a  href ="javascript:alert('hello');" > 介绍 </ a ></ li >
     < li >< a  href ="javascript:alert('hello');" > 场馆 </ a ></ li >
     < li >< a  href ="javascript:alert('hello');" > 项目 </ a ></ li >
     < li >< a  href ="javascript:alert('hello');" > 员工 </ a ></ li >
     < li >< a  href ="javascript:alert('hello');" > 会员 </ a ></ li >
     < li >< a  href ="javascript:alert('hello');" > 车王 </ a ></ li >
     < li >< a  href ="javascript:alert('hello');" > 公主 </ a ></ li >
   </ ul >
</ div >

 

 

CSS:

 

 

<style type="text/css">
*
{} {
font-size:12px;
}
#Menubox_1
{} {
  width:500px;
  height:20px;
  overflow:hidden;
}
#Menubox_1 ul
{} {
    list-style-type: none;
    margin:0px;
}
#Menubox_1 li
{} {
    background-color:#cccccc;
    width:58px;
    height:18px;
    float:left;
    line-height:18px;
    text-align:center;
    border:1px solid #cccccc;
    margin-left:2px;
}
.touming
{} {
    filter: Alpha(opacity=50);
    -moz-opacity: .5;
    opacity: 0.5;
}
</style>

 

转载于:https://www.cnblogs.com/flysnow-z/archive/2009/04/15/1436652.html