<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    piliskys

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

            不知道大家進163的郵件有沒有發現上面的郵件是可以拖動的,本想看看它的原碼是如果實現,但由于本人水平太次,不能找到其中的原碼,后面通過網上找到一些代碼,修改了些基本上能實現此種效果,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">尊敬的領導:<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 霹靂火 閱讀(2913) 評論(6)  編輯  收藏

    評論

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

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

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

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

    javascript的也行  回復  更多評論
      

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

    # re: css和javascript實現拖動效果 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">
    尊敬的領導:<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>
      回復  更多評論
      

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


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


    網站導航:
     
    主站蜘蛛池模板: 亚洲欧美日韩国产成人| 亚洲av色影在线| 在线aⅴ亚洲中文字幕| 91视频免费观看| 亚洲国产日韩在线观频| 在线观看亚洲专区| 免费看国产一级片| 国产天堂亚洲精品| 国产一区二区三区免费在线观看| 国产精品区免费视频| 亚洲免费人成在线视频观看| 中文字幕av无码不卡免费| 亚洲精品美女久久久久99小说| 亚洲视频在线一区二区| 日日狠狠久久偷偷色综合免费| 成全视频免费观看在线看| 好看的电影网站亚洲一区| 免费污视频在线观看| 中文字幕亚洲精品| 91成人免费观看网站| 亚洲αⅴ无码乱码在线观看性色| 好男人资源在线WWW免费 | 日韩亚洲变态另类中文| 一级成人毛片免费观看| 国产亚洲午夜高清国产拍精品| 亚洲无圣光一区二区| 国产h视频在线观看网站免费| 亚洲国产一区明星换脸| 国产成人1024精品免费| 亚洲成AV人在线播放无码| 18禁成人网站免费观看| 亚洲一区二区三区在线观看蜜桃 | 四虎免费永久在线播放| 老司机午夜在线视频免费观| 亚洲伊人成无码综合网 | 亚洲av日韩av无码av| 日韩成人在线免费视频| 国产精品免费在线播放| 亚洲国产老鸭窝一区二区三区| 国产V片在线播放免费无码| 国产AV无码专区亚洲精品|