拖拽js和jq写法

最新推荐文章于 2023-01-16 10:32:13 发布

转载最新推荐文章于 2023-01-16 10:32:13 发布 · 844 阅读

html/div/css 专栏收录该内容

56 篇文章

订阅专栏

本文介绍两种实现拖拽效果的方法：一种使用原生JavaScript，另一种利用jQuery。原生JS方法通过监听鼠标按下、移动和释放来更新元素位置；而jQuery方法简化了事件绑定，通过计算相对位置确保元素始终处于可视范围内。

第一种原生js写法

window.onload=function ()
{
    var
oDrag=document.getElementById('drag');
     
    oDrag.onmousedown=function (ev)
    {
        var
oEvent=ev||event;
        var
disX=oEvent.clientX-oDrag.offsetLeft;//x坐标
        var
disY=oEvent.clientY-oDrag.offsetTop;//y坐标
         
        document.onmousemove=function (ev)
        {
            var
oEvent=ev||event;
            var
l=oEvent.clientX-disX;//移动x坐标位置
            var
t=oEvent.clientY-disY;//移动y坐标位置
            //限制范围
            if(l<0)
            {
                l=0;
            }
            else
if(l>document.documentElement.clientWidth-oDrag.offsetWidth)
            {
                l=document.documentElement.clientWidth-oDrag.offsetWidth;
            }
             
            if(t<0)
            {
                t=0;
            }
            else
if(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 (){
            var
patch=parseInt($(this).css("height"))/2;
/* 也可以写成var patch=parseInt($(this).css("width"))/2*/
            $(document).mousemove(function (event){
            var
ox=event.clientX;
            var
oy=event.clientY;
            var
t=oy-patch;
            var
l=ox-patch;
            var
w=$(window).width()-$('#drag').width();
            var
h=$(window).height()-$('#drag').height();
            if(t<0){
                t=0;
                }
            else
if(t>h){
                t=h;
                }  
             if(l<0){
                 l=0;
                 }
             else
if(l>w){
                  l=w;      
                 }
            $('.drag').css({top:t,left:l})
            })
            });
            $(document).mouseup(function (){
            $(this).unbind("mousemove");
            }); 
        })