在网页中怎么实现图片的拖动？

想实现百度地图啊那种拖动图片的功能~
最好有完整的代码（在asp源文件里放些什么，在cs文件里放些什么）。还不知道在ASP中怎么使用javascript，能够不用是最好啦。

解决方案 »

  1.   

    把图片放在div中，drag and drop Div
      

  2.   

    把图片放在div中会。
    drag and drop Div 什么意思？
      

  3.   

    这个貌似是ajax的内容吧。放个scriptmanager然后拖个dragpanel，然后用dragpanel控制你想要的div。
      

  4.   

    AJAX我装了，但没有dragpanel只有DragPanelExtender怎么弄能具体点吗？
      

  5.   

    来个简单点的图片拖动吧，类似百度地图拖地图的功能。只要能拖动图片就行啊~~
    当然要完整点的，javascript今天才知道了解了点的。
      

  6.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script language="javascript">
    /*
    *className Xdrag
    @param obj 被拖动的dom节点
    @param box obj被拖动的范围默认为document.body
    */
    function Xdrag(obj,box){
        var mask=0;//设置监听是否鼠标按下
            obj.style.position="absolute";
            var Ow=obj.offsetWidth;//获取拖动对象的宽高
            var Oh=obj.offsetHeight;
            if(!box){
                    box=document.body;
            }
        var Bw=box.offsetWidth;//获取拖动容器的宽高
        var Bh=box.offsetHeight;
            obj.style.position="absolute";
            obj.onmousedown=function(e){
                    var e=e||window.event;
                    this.onselectstart=function(){return false;}
                    var eSrc=e.srcElement||e.target;
                    mask=1;
                    XCapture(obj,"start");
            Ex=XmouseCoords(e).x-XgetPosition(obj).x;
                    Ey=XmouseCoords(e).y-XgetPosition(obj).y;
            }
            document.onmousemove=function(e){
                var e=e||window.event;
                    if(mask==1){
                      var Ox=XmouseCoords(e).x-Ex;
                      var Oy=XmouseCoords(e).y-Ey;
                      if(box){
                            var Bx=XgetPosition(box).x;
                            var By=XgetPosition(box).y;
                            if(Ox<Bx){
                                    Ox=Bx;
                            }
                            else if(Ox>Bx+Bw-Ow){
                                    Ox=Bx+Bw+-Ow;
                            }
                            if(Oy<By){
                                    Oy=By;
                            }
                            else if(Oy>By+Bh-Oh){
                                Oy=By+Bh-Oh;
                            
                            }
                      }
                     obj.style.left=Ox+"px";
                     obj.style.top=Oy+"px";
                    }
            }
            obj.omouseup==function(e){
                    maks=0;
                    XCapture(obj,"end");
            
            }
            document.body.onmouseup=function(){
                    mask=0;
                    XCapture(obj,"end");
            }
    }
    /*获取鼠标位置*/
    function XmouseCoords(ev){
            if(ev.pageX || ev.pageY){
                    return {x:ev.pageX, y:ev.pageY};
            }
            return {
                    x:ev.clientX + document.documentElement.scrollLeft,
                    y:ev.clientY + document.documentElement.scrollTop
            };
    }
    /*设置事件捕获
    *function  XCapture
    @param o, 捕获事件的对象
    @param mak，状态 "start" or "end"
    */
    function XCapture(o,mak){
        if(mak=="start"){
              if(o.setCapture){o.setCapture();}
              else if(window.captureEvents)
                             {window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);}
            }
            if(mak=="end"){
              if(o.releaseCapture){o.releaseCapture();}
              else if(window.captureEvents)
                            {window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);}
             }
            
    }
    /*获取指定节点的坐标*/
    function XgetPosition(e){
            var left = 0;
            var top  = 0;
            while(e.offsetParent){
                    left += e.offsetLeft;
                    top  += e.offsetTop;
                    e= e.offsetParent;
            }
            left += e.offsetLeft;
            top  += e.offsetTop;
            return {x:left, y:top};
    }
    </script>
    </head>
    <body onload="Xdrag(mm,kk);"><table width="600" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="500" bgcolor="#0099CC" id="kk"><img id="mm" src="http://www.51wisdom.com.cn/uploadfile/20081019112020846.jpg"  /></td>
      </tr>
    </table>
    </body>
    </html>