javascript 拖拽函数

1.拖拽的时候,如果有文字被选中,会产生问题
原因:当鼠标按下的时候,如果页面中有文字被选中,那么会触发浏览器默认拖拽文字的效果
解决:
标准:阻止默认行为
非标准ie:全局捕获 //设置全局捕获 ,当我们给一个元素设置全局捕获以后,
// 那么这个元素就会监听后续发生的所有事件,当有事件发生的时候,就会被当前设置了全局捕获的元素所触发

/*
例如:如果要实现div的拖拽,则给div设置全局捕获,这样就算是拖拽途中无意选中了文字或者其他浏览器默认有拖拽行为的元素,也不会出现bug。因为,给div设置了全局捕获之后,其他元素的鼠标拖拽事件都会被div捕获而不执行。
*/

        /*
         ie : 有,并且有效果
         ff : 有,但是没效果
         chrome : 没有
         */
//拖拽函数
            function drag(obj) {

                obj.onmousedown = function (ev) {
                    var ev = ev || event;

                    var disX = ev.clientX - this.offsetLeft;
                    var disY = ev.clientY - this.offsetTop;

                              //针对IE设置全局捕获
                    if (obj.setCapture) {//为什么要判断,因为有的浏览器没有setCapture
                        obj.setCapture();
                    }

                    document.onmousemove = function (ev) {
                        var ev = ev || event;

                        obj.style.left = ev.clientX - disX + 'px';
                        obj.style.top = ev.clientY - disY + 'px';
                    }

                    document.onmouseup = function () {
                        document.onmousemove = document.onmouseup = null;
                        //释放全局捕获 releaseCapture();
                        if (obj.releaseCapture) {
                            obj.releaseCapture();
                        }
                    }
                    //非IE阻止默认行为
                    return false;//阻止默认行为
                }
            }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值