piliskys

            BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理 ::
            25 隨筆 :: 0 文章 :: 40 評論 :: 0 Trackbacks
          摘要:html組件實現(xiàn)可拖動效果

                  不知道大家進163的郵件有沒有發(fā)現(xiàn)上面的郵件是可以拖動的,本想看看它的原碼是如果實現(xiàn),但由于本人水平太次,不能找到其中的原碼,后面通過網(wǎng)上找到一些代碼,修改了些基本上能實現(xiàn)此種效果,html代碼如下:
          <style>
          <!--
          .drag
          {position:relative;cursor:hand}
          -->
          </style>
          <script >
          <!--
          var dragapproved=false
          var z,x,y
          var xx,yy

          function move(){
          if ( z==null){ ; return}
          if (event.button==1&&dragapproved){
          z.style.pixelLeft
          =temp1+event.clientX-x
          z.style.pixelTop
          =temp2+event.clientY-y
          return false
          }
          }
          function moveto(){
          z.style.pixelLeft
          = xx
          z.style.pixelTop
          = yy
          z
          =null
          }
           
          function drags(){
            
          if (!document.all)return
          if (event.srcElement.className=="drag"){
           
          dragapproved
          =true
          z
          =event.srcElement
          if ( z==null){  return}
          temp1
          =z.style.pixelLeft
          temp2
          =z.style.pixelTop
          xx
          =z.style.pixelLeft
          yy
          =z.style.pixelTop
          x
          =event.clientX
          y
          =event.clientY
          document.onmousemove
          =move

          }
           
          }

          function drags1(){
          if ( z==null){ ; return}
          if (z.className=="drag"){
          //z=event.srcElement
          //
          alert(z.type);
          temp1=z.style.pixelLeft
          temp2
          =z.style.pixelTop
          x
          =event.clientX
          y
          =event.clientY
          moveto()
          }

          }
          document.onmousedown
          =drags
          document.onmouseup
          =drags1 

          Function(
          "dragapproved=false")
          //-->
          </script>
          <html>
          <body>
           
          <table CELLPADDING=0 CELLSPACING=0 width="630" align="center">
            
          <tr>
               
          <td align="center" colspan="9" height="60">
           
          <table bgcolor="blue" CELLPADDING=1 CELLSPACING=1 width="200" height="23" align="center" border=1>
            
          <tr>
               
          <td align="center" colspan="9" height="60">
                 
          <font class="title1">自 薦 信</font>
               
          </td>
            
          </tr>
               
          <tr>
               
          <td colspan="9"  class="drag" height="27">尊敬的領(lǐng)導(dǎo):<br>
          &nbsp;&nbsp;&nbsp;&nbsp;您好!<br>
           
          <br>
          &nbsp;&nbsp;此致<br>
          敬禮 ! 
          <br>
          &nbsp;&nbsp;&nbsp;&nbsp; 自薦人:piliskys <br>
                
               
          </td>
            
          </tr>
            
          <tr><td align="center">
            
          <input type=button  class="drag"   value=寫郵件 style=width:78 />
            
          </td></tr>
            
          <tr  >
                            
          <td  class="drag">
                              姓
                              名:
                            
          </td>
                            
                          
          </tr>
            
          </table>
            
          </td>
            
          </tr>
            
          </table>
          </body>
          </html>
           
          posted on 2005-12-14 10:26 霹靂火 閱讀(2914) 評論(6)  編輯  收藏

          評論

          # re: css和javascript實現(xiàn)拖動效果 2005-12-14 12:33 hanny0918
          這樣做可用于什么上呢?  回復(fù)  更多評論
            

          # re: css和javascript實現(xiàn)拖動效果 2005-12-14 13:17 霹靂火
          163郵件上是用于拖到相應(yīng)的文件夾下,這是一個功能,也可算是增加頁面的效果吧,  回復(fù)  更多評論
            

          # re: css和javascript實現(xiàn)拖動效果 2005-12-15 12:36 kris_wang
          http://www.itpub.net/463545.html

          你有顏色選擇器的東西嗎,比如dreamweaver中的顏色選取的

          javascript的也行  回復(fù)  更多評論
            

          # re: css和javascript實現(xiàn)拖動效果 2006-03-01 09:54 老牛
          很不錯,多謝分享。  回復(fù)  更多評論
            

          # re: css和javascript實現(xiàn)拖動效果 2007-06-10 09:58 calmzeal
          哥們
          剛好要弄一個類似功能
          于是拿你的代碼改了改 呵呵
          增加了拖動時以div顯示選中信息(具體信息還沒寫 。。)
          還有接收對象 使用class=dragto表示能接收拖動




          <style type="text/css">
          <!--
          .drag{position:relative;cursor:hand}
          -->
          </style>

          <script type="text/javascript">
          <!--
          var dragapproved=false
          var z,x,y
          var xx,yy

          function move(){
          if ( z==null){ ; return}
          if (event.button==1&&dragapproved){
          z.style.pixelLeft=event.clientX
          z.style.pixelTop=event.clientY

          if (event.srcElement.className=="dragto"){
          z.innerText="aaa";
          }
          //z.style.pixelLeft=temp1+event.clientX-x
          //z.style.pixelTop=temp2+event.clientY-y
          return false
          }
          }
          function moveto(){
          z.style.pixelLeft= xx
          z.style.pixelTop= yy
          z=null
          }

          function drags(){

          if (!document.all)return
          if (event.srcElement.className=="drag"){


          dragapproved=true
          //z=event.srcElement
          z=document.all("drag1");
          z.style.pixelLeft=event.clientX;
          z.style.pixelTop=event.clientY;

          if ( z==null){ return}
          temp1=z.style.pixelLeft
          temp2=z.style.pixelTop
          xx=z.style.pixelLeft
          yy=z.style.pixelTop
          x=event.clientX
          y=event.clientY
          document.onmousemove=move

          }

          }

          function drags1(){
          if ( z==null){ ; return}
          if (z.className=="drag"){
          //z=event.srcElement
          //alert(z.type);
          temp1=z.style.pixelLeft
          temp2=z.style.pixelTop
          x=event.clientX
          y=event.clientY
          if (event.srcElement.className=="dragto"){
          alert('移動完畢!');
          }
          else moveto()
          }

          }
          document.onmousedown=drags
          document.onmouseup=drags1

          Function("dragapproved=false")
          //-->
          </script>

          <html>
          <body>

          <table>
          <tr>
          <td class="dragto">1111111111</td>
          </tr>
          <tr>
          <td class="dragto">222222222</td>
          </tr>
          </table>
          <table cellpadding="0" cellspacing="0" width="630" align="center">
          <tr>
          <td align="center" colspan="9" height="60">
          <table bgcolor="blue" cellpadding="1" cellspacing="1" width="200" height="23" align="center"
          border="1">
          <tr>
          <td align="center" colspan="9" height="60">
          <font class="title1">自 薦 信</font>
          </td>
          </tr>
          <tr>
          <td colspan="9" class="drag" height="27">
          尊敬的領(lǐng)導(dǎo):<br>
          &nbsp;&nbsp;&nbsp;&nbsp;您好!<br>
          <br>
          &nbsp;&nbsp;此致<br>
          敬禮 !
          <br>
          &nbsp;&nbsp;&nbsp;&nbsp; 自薦人:piliskys
          <br>
          </td>
          </tr>
          <tr>
          <td align="center">
          <input type="button" class="drag" value="寫郵件" style="width: 78" />
          </td>
          </tr>
          <tr>
          <td class="drag">
          姓 名:
          </td>
          </tr>
          </table>
          </td>
          </tr>
          </table>
          <div id="drag1" class="drag" style="position:absolute"><div>?</div>拖動中。。。。</div>
          </body>
          </html>
            回復(fù)  更多評論
            

          # re: css和javascript實現(xiàn)拖動效果 2008-07-09 14:49 小頭獵豹
          不明白你們寫的這個是干什么用的  回復(fù)  更多評論
            


          只有注冊用戶登錄后才能發(fā)表評論。


          網(wǎng)站導(dǎo)航:
          博客園   IT新聞   Chat2DB   C++博客   博問  
           
          主站蜘蛛池模板: 龙江县| 营口市| 临颍县| 新宁县| 东明县| 永昌县| 河津市| 原阳县| 陆良县| 城口县| 安顺市| 扶绥县| 涟水县| 榆社县| 洛川县| 来宾市| 通山县| 隆林| 理塘县| 濮阳县| 锡林郭勒盟| 木兰县| 玉林市| 舒兰市| 延长县| 喀喇沁旗| 揭阳市| 锦屏县| 来凤县| 桂林市| 白河县| 清河县| 新河县| 大同县| 汾阳市| 金华市| 仙游县| 揭东县| 河南省| 永修县| 湖州市|