jQuery实现鼠标拖拽事件

1、设置一个待拖动的元素,设置样式

<ul>
        <li>linux</li>
        <li>java</li>
        <li>javascript</li>
    </ul>
*{
            margin:0;
            padding:0;
        }
        ul{
            list-style: none;
            background-color: grey;
            color:white;
            width:65px;
            height:70px;
            padding:10px;
            position: absolute;
        }

2、给当前元素绑定一个鼠标点下去事件

计算鼠标点击位置和元素离最左上角的相对位置,
并给document对象绑定一个鼠标移动事件,当鼠标移动时,将该元素带动到鼠标所在位置
最后给document对象绑定一个鼠标松开事件,解绑鼠标移动事件和鼠标松开事件
js代码如下所示:

$('ul').mousedown(function(event){
            deltax = event.clientX - $(this).offset().left
            deltay = event.clientY - $(this).offset().top
            $(document).bind('mousemove',start)
            $(document).bind('mouseup',end)
            return false
        })
        function start(event){
                x = event.clientX - deltax
                y = event.clientY - deltay
                $('ul').css({'left':x+'px','top':y+'px'})
                return false
        }
        function end(event){
            $(this).unbind('mousemove')
            $(this).unbind('mouseup')
        }

两个return false为去掉一些默认事件,去掉会出现问题

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值