美文网首页
JavaScript拖拽函数

JavaScript拖拽函数

作者: FinGet | 来源:发表于2017-10-18 15:42 被阅读0次

拖拽的时候,如果有文字被选中,会产生问题
原因:当鼠标按下的时候,如果页面中有文字被选中,那么会触发浏览器默认拖拽文字的效果
解决:
标准:阻止默认行为
非标准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;//阻止默认行为
                }
            }

相关文章

网友评论

      本文标题:JavaScript拖拽函数

      本文链接:https://www.haomeiwen.com/subject/ffkeuxtx.html