案例：拖拽封装 

<body>
　　<div id="div1"></div>
　　<img src="1.jpg" id="img1" />
</body>
<style>
　　#div1 {width: 100px; height: 100px; background: red; position: absolute;}
　　#img1 { position: absolute;}
</style>
<script>
　　window.onload = function() {
　　/*
    1.拖拽的时候，如果有文字被选中，会产生问题
        原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字的行为
        解决办法：【标准--阻止默认行为】【非标准ie--设置全局捕获】
    2.拖拽图片也会有问题，原因，解决的办法同上
　　*/
　　/*
    设置全局捕获 ，当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续发生的所有事件，当有事件发生的时候，就会被当前设置了全局捕获的元素所触发
    ie : 有setCapture属性，并且有效果
    ff : 有setCapture属性，但是没效果
    chrome : 没有setCapture属性
　　*/
    var oDiv = document.getElementById('div1');
    var oImg = document.getElementById('img1');
    drag(oImg);
    drag(oDiv);
    function drag(obj) {
        obj.onmousedown = function(ev) {
            var ev = ev || event;
            var disX = ev.clientX - this.offsetLeft;
            var disY = ev.clientY - this.offsetTop;
            if ( obj.setCapture ) {     //通过判断setCapture属性来确定是否为IE浏览器
                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();
                }
            }
            return false;   //阻止默认行为
        }
    }
};
</script>

 

posted @ 2017-04-07 21:51  Booo  阅读(461)  评论(0)    收藏  举报