div的拖动js

本文详细介绍了如何使用jQuery实现鼠标拖拽效果,包括鼠标左键按住事件的绑定,通过clientX和clientY获取鼠标坐标,利用offset()方法确定元素位置,以及mousemove和mouseup事件的绑定与解绑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

$(document).ready(function(){
     
      /* 绑定鼠标左键按住事件 */
       
     var drag=function(obj){
            
                obj.bind("mousedown",start);
 
                function start(event){
                    if(event.button==0){//判断是否点击鼠标左键
                        /*
                         * clientX和clientY代表鼠标当前的横纵坐标
                         * offset()该方法返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
                         * bind()绑定事件,同样unbind解绑定,此效果的实现最后必须要解绑定,否则鼠标松开后拖拽效果依然存在
                         * getX获取当前鼠标横坐标和对象离屏幕左侧距离之差(也就是left)值,
                         * getY和getX同样道理,这两个差值就是鼠标相对于对象的定位,因为拖拽后鼠标和拖拽对象的相对位置是不变的
                         */
                         gapX=event.clientX-obj.offset().left-400;
                        gapY=event.clientY-obj.offset().top-200;//自己微调
                        //movemove事件必须绑定到$(document)上,鼠标移动是在整个屏幕上的
                        $(document).bind("mousemove",move);
                        //此处的$(document)可以改为obj
                        $(document).bind("mouseup",stop);
                       
                    }
                    return false;//阻止默认事件或冒泡
                }
                function move(event){
                    obj.css({
                        "left":(event.clientX-gapX)+"px",
                        "top":(event.clientY-gapY)+"px"
                    });
                    return false;//阻止默认事件或冒泡
                }
                function stop(){
                    //解绑定,这一步很必要,前面有解释
                    $(document).unbind("mousemove",move);
                    $(document).unbind("mouseup",stop);
                    
                }
            }
            
            drag($("div#js_sw"));
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值