注册 留言板
当前位置:首页 > 前端开发 > JAVASCRIPT > 正文

javascript 拖拽函数

来源:CSDN   发布时间: 2017-06-19   作者:o_Mario_o   浏览次数:
摘要: 1.拖拽的时候,如果有文字被选中,会产生问题 原因:当鼠标按下的时候,如果页面中有文字被选中,那么会触发浏览器默认拖拽文...

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;//阻止默认行为
                }
            }


javascript 函数 拖拽
我来说两句
评论内容:
验  证  码:
 
(网友评论仅供其表达个人看法,并不表明本站同意其观点或证实其描述。)
评论列表
已有 0 条评论(查看更多评论)
精彩专题
友情链接:
设为首页 - 加入收藏 Copyright @2016 Infocool 版权所有 粤ICP备16000626号