拖拽js和jq写法

来源：互联网发布：剑3唐门成男捏脸数据编辑：程序博客网时间：2024/05/16 19:20

第一种原生js写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
window.onload=function ()
{
    varoDrag=document.getElementById('drag');
     
    oDrag.onmousedown=function (ev)
    {
        varoEvent=ev||event;
        vardisX=oEvent.clientX-oDrag.offsetLeft;//x坐标
        vardisY=oEvent.clientY-oDrag.offsetTop;//y坐标
         
        document.onmousemove=function (ev)
        {
            varoEvent=ev||event;
            varl=oEvent.clientX-disX;//移动x坐标位置
            vart=oEvent.clientY-disY;//移动y坐标位置
            //限制范围
            if(l<0)
            {
                l=0;
            }
            elseif(l>document.documentElement.clientWidth-oDrag.offsetWidth)
            {
                l=document.documentElement.clientWidth-oDrag.offsetWidth;
            }
             
            if(t<0)
            {
                t=0;
            }
            elseif(t>document.documentElement.clientHeight-oDrag.offsetHeight)
            {
                t=document.documentElement.clientHeight-oDrag.offsetHeight;
            }
             
            oDrag.style.left=l+'px';
            oDrag.style.top=t+'px';
        };
         
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };
};

第二种jQuery写法

$(function(){
            $('#drag').mousedown(function (){
            varpatch=parseInt($(this).css("height"))/2;/* 也可以写成var patch=parseInt($(this).css("width"))/2*/
            $(document).mousemove(function (event){
            varox=event.clientX;
            varoy=event.clientY;
            vart=oy-patch;
            varl=ox-patch;
            varw=$(window).width()-$('#drag').width();
            varh=$(window).height()-$('#drag').height();
            if(t<0){
                t=0;
                }
            elseif(t>h){
                t=h;
                }  
             if(l<0){
                 l=0;
                 }
             elseif(l>w){
                  l=w;      
                 }
            $('.drag').css({top:t,left:l})
            })
            });
            $(document).mouseup(function (){
            $(this).unbind("mousemove");
            }); 
        })

0 0