频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
javascript拖拽函数
2017-06-19 09:35:49      个评论    来源:  
收藏   我要投稿

javascript拖拽函数

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

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

        /*
         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改变table的背景色
下一篇:JavaScript的BOM对象
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 |

版权所有: 88bifa.com--致力于做实用的IT技术学习网站