拖曳js

<div class="search_top_title">

<span><img src="images/aznsson.gif" id="img01" align="left" alt="职能搜索" onmouseover="this.className='mouseoverpointer'" /><img src="images/aznssoff.gif" style="display:none;" id="img00"  align="left" alt="职能搜索" onmouseover="this.className='mouseoverpointer'"  onclick="change('typeSearchTbl0')"/></span>

<span><img src="images/ahyssoff.gif" id="img10" align="left" onmouseover="this.className='mouseoverpointer'"  onclick="change('typeSearchTbl1')"/>

<img src="images/ahysson.gif" style="display:none;" id="img11" onmouseover="this.className='mouseoverpointer'"  align="left" /></span> 

<span><img src="images/adqssoff.gif"  id="img20" align="left"  onclick="change('typeSearchTbl2')"/>

<img src="images/adqsson.gif" style="display:none;" id="img21"   align="left" onmouseover="this.className='mouseoverpointer'" /></span> 

		<span><img src="images/labeltr.gif" width="6" height="33" onmouseover="this.className='mouseoverpointer'"  align="right" /></span> 

</div>

 <div id="f"  style=" display:none;position: absolute; width: 645px; height: 150px; background-color: #ccc; top: 150px; left: 200px; z-index: 100; ">

  <div id="title" class="tbltitle" style="cursor: move; height: 20px; color: #fff;font-size: 12px; padding-top: 5px; padding-left: 3px;"><img src="images/title_layer_yd.gif" align="absmiddle" />请选择职能类别(最多仅能选择5项)<a href="#" style="float:right; padding-right:20px; color:#FFF;" onclick="colseFlow()">[确定]</a> </div>

  <table id="idBox" class="lightbox"  width="100%" border="0" cellpadding="0" cellspacing="0" style="border-bottom:3px solid #ff7300; ">



<tr><td height="40px" class="search-sub-font" colspan="4" >计算机/互联网/通信/电子</td></tr>

   <tr><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机软件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td>

   </tr>

   <tr><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td></tr>

   <tr><td height="40px" class="search-sub-font">销售/客服/技术支持</td></tr>

     <tr><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td></tr>

      <tr><td height="40px" class="search-sub-font">会计/金融/银行/保险</td></tr>

     <tr><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td></tr>

      <tr><td height="40px" class="search-sub-font">生产/营运/采购/物流险</td></tr>

     <tr><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td></tr>

      <tr><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td></tr>

       <tr><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td  height="25" colspan="3"align="left" valign="middle" class="backgray"></td></tr>

        <tr><td height="40px" class="search-sub-font">广告/市场/媒体/艺术</td></tr>

         <tr><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td></tr>

          <tr><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td></tr>

            <tr><td height="40px" class="search-sub-font">生物/制药/医疗/护理</td></tr>

             <tr><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td></tr>

              <tr><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td><td height="25" width="161" align="left" valign="middle" class="backgray" style="padding-left:2px;cursor: pointer;" onmouseover="this.className='onmousebackgray'" onmouseout="this.className='backgray';" onclick="#">计算机硬件</td></tr>

</table>

</div>

<script type="text/javascript">

var posX;

var posY;  

fdiv = document.getElementById("f");  

document.getElementById("title").onmousedown=function(e)

{

  if(!e) e = window.event; //如果是IE

  posX = e.clientX - parseInt(fdiv.style.left);

  posY = e.clientY - parseInt(fdiv.style.top);

  document.onmousemove = mousemove;  

}

document.onmouseup = function()

{

  document.onmousemove = null;

}

function mousemove(ev)

{

  if(ev==null) ev = window.event;//如果是IE

  fdiv.style.left = (ev.clientX - posX) + "px";

  fdiv.style.top = (ev.clientY - posY) + "px";

}

function colseFlow(){

	document.getElementById("f").style.display="none";

	document.getElementById("overdiv").style.display="none";

	}

function showFlow(){

	document.getElementById("f").style.display="block";

	document.getElementById("overdiv").style.display="block";

	}



</script>