javascript--鼠标拖动

本文介绍了一种在不使用额外布尔变量的情况下实现鼠标拖动效果的方法。通过在鼠标按下时绑定移动和抬起事件,可以有效地控制元素的拖动行为。

因为鼠标没有拖动事件(按下鼠标并移动),只有按下,抬起,移动。

记得在之前的一个"拖动层"的随笔中,我实现拖动,是用的一个布尔变量,判断是否可以拖动某元素。

这两天看了一些东西,发现不需要设这个布尔变量;

 

实现过程:

按下鼠标的时候,给文档对象(当然也可以是别的DOM对象)的移动事件绑定一个处理函数,同时也给鼠标抬起时绑定一个解除的处理函数。

 

//按下鼠标并移动时(拖动),调用的函数;
    function startSelection(event){
        ……
    }


//解除移动时的处理函数;
    function cancelSelection() {
        $(document).unbind('mousemove', startSelection).unbind('mouseup', cancelSelection);
  }

//鼠标在按下时调用的函数    
    function imgMouseDown(event){
        $(document).mousemove(startSelection).mouseup(cancelSelection);
    }

$img.bind("mousedown",imgMouseDown)

 

 

转载于:https://www.cnblogs.com/lufy/archive/2012/05/28/2521055.html

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值