<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 小頭獵豹
    不明白你們寫的這個是干什么用的  回復  更多評論
      


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


    網站導航:
     
    主站蜘蛛池模板: 国产hs免费高清在线观看| 巨波霸乳在线永久免费视频 | 蜜芽亚洲av无码一区二区三区| 99re免费在线视频| 久久精品国产亚洲AV大全| 日韩精品无码专区免费播放| 亚洲日本va午夜中文字幕一区| 无码国产精品一区二区免费3p | 天天摸天天操免费播放小视频| 欧洲 亚洲 国产图片综合| 国产精品免费视频网站| 视频一区在线免费观看| 狠狠亚洲狠狠欧洲2019| 日韩亚洲精品福利| 国产99久久久久久免费看| 国产亚洲无线码一区二区| 99在线观看视频免费| 亚洲成A人片在线播放器| 国产在线ts人妖免费视频| 一个人看的在线免费视频| 亚洲产国偷V产偷V自拍色戒 | 亚洲精品不卡视频| 最近中文字幕无免费视频| 亚洲AV人人澡人人爽人人夜夜| 97公开免费视频| 亚洲欧美成aⅴ人在线观看| 亚洲成av人片不卡无码久久| 最近更新免费中文字幕大全| 亚洲午夜视频在线观看| 成人毛片视频免费网站观看| 人与动性xxxxx免费| 亚洲综合激情六月婷婷在线观看| 毛片视频免费观看| 在线观看免费黄网站| 亚洲一区二区三区播放在线| 又粗又大又猛又爽免费视频| 久久国产精品成人片免费| 亚洲AV成人精品日韩一区| 亚洲色偷偷偷鲁综合| 99久久免费国产特黄| 亚洲乱码av中文一区二区|