如何实现网页按下鼠标可拖动？

<script>
function drag_layer(layer_id)
{
with(layer_id){
style.pixelLeft=window.event.clientX+window.document.body.scrollLeft-300;
style.pixelTop=window.event.clientY+window.document.body.scrollTop-400;
}
}
</script>
<DIV id=img_div style="Z-INDEX: 10; LEFT: 0px; VISIBILITY: visible; POSITION: absolute; TOP: 0px; cursor:move" ondrag="drag_layer(this);">
<img src=http://cimg.163.com/movie/0206/13/yuka01_b.jpg></div>

解决方案 »

  1.   

    <script>
    function drag_layer(layer_id)
    {
    with(layer_id){
    if(down==1){
    style.pixelLeft += window.event.clientX - px;
    style.pixelTop += window.event.clientY - py;
    px=event.clientX;py=event.clientY;
    }
    }
    }
    </script>
    <DIV id=img_div px=0 py=0 down=0 style="Z-INDEX: 10; LEFT: 0px; VISIBILITY: visible; POSITION: absolute; TOP: 0px; cursor:move" onmousedown="px=event.clientX;py=event.clientY; down=1" onmouseup="px=0;py=0; down=0" onmousemove="drag_layer(this);" ondrag="return false">
    <img src=http://cimg.163.com/movie/0206/13/yuka01_b.jpg></div>
      

  2.   

    <html>
    <head>
    </head>
    <body>
    <style>
    <!--.drag{position:relative;cursor:hand}
    -->
    </style>
    <script language="JavaScript">
    var dragapproved=false
    var z,x,y
    function move(){
    if (event.button==1&&dragapproved){
    z.style.pixelLeft=temp1+event.clientX-x
    z.style.pixelTop=temp2+event.clientY-y
    return false
    }}
    function drags(){
    if (!document.all)
    return
    if (event.srcElement.className=="drag"){
    dragapproved=true
    z=event.srcElement
    temp1=z.style.pixelLeft
    temp2=z.style.pixelTop 
    x=event.clientX
    y=event.clientY
    document.onmousemove=move
    }}
    document.onmousedown=drags
    document.onmouseup=new Function("dragapproved=false")
    </script>
            <img src="img/draw.jpg" class="drag">
    </body>
    </html>
      

  3.   

    改进
    更为通用的写法，将代码放到一个js文件中，再包含进来，
    页面只需放一图片即可。
    不必为每张页面写重复的代码主文件：<html><head>
    <script src="drag_layer.js"></script>
    </head>
    <body>
    <img src="http://cimg.163.com/movie/0206/13/yuka01_b.jpg">
    </body></html>//drag_layer.jsfunction drag_layer()
    {
    var e = event.srcElement;
    with(e){
    if(down==1){
    style.pixelLeft += window.event.clientX - px;
    style.pixelTop += window.event.clientY - py;
    px=event.clientX;py=event.clientY;
    }
    }
    }
    function init(){
    var e = document.getElementsByTagName("IMG")[0];
    if(!e) return;
    with(e){
    style.position = "absolute";
    style.top = "0";
    style.left = "0";
    style.cursor="move";
    px = 0; py=0; down=0;
    ondrag = new Function("return false");
    onmousedown = new Function("px=event.clientX;py=event.clientY; down=1;");
    onmouseup = new Function("down=0");
    onmousemove = drag_layer;
    }
    }
    window.onload=init;
      

  4.   

    <SCRIPT>
    var old_y=0;  //记录鼠标按下时的Ｙ轴位置
    var yn=0;  //用于记录鼠标状态
    function moveit()
    {
    if(yn==1 &&  event.button==1)  //如果鼠标左键按下就移动页面
    document.body.scrollTop=(old_y-event.clientY); //移动页面
    }
    function downit()
    {old_y=event.clientY+document.body.scrollTop; //记住鼠标按下时的Ｙ轴位置
    yn=1; //用于记住鼠标已按下
    }function upit()
    {yn=0;}  //记住鼠标已放开document.onmouseup=upit; //鼠标放开时执行upit()函数
    document.onmousedown=downit; //鼠标按下时执行downit()函数
    document.onmousemove =moveit; //鼠标移动时执行moveit()函数
    </SCRIPT><SCRIPT language=JavaScript>
    var i=0;
    for(i=0;i<100;i++){
    document.write("<span style='cursor:hand;font:menu'>"+i+"－－－－－－－－－－－－－－－－－－－－－－－－－－－－</span><br>");
    }</SCRIPT>