拖拽事件

<h1>拖拽事件</h1>
<ul>
    <li>onmousedown:鼠标按下</li>
    <li>onmousemove：鼠标移动</li>
    <li>onmouseup：鼠标放开</li>
</ul>
    <p>拖拽的时候如果有文字选中，会出现问题！: 当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器的默认拖拽文字的效果</p>
    <p>标准下：阻止默认行为</p>
    <p>；非标准下：.setCapture()//全局捕获;设置全局捕获，当我门给一个元素设置全局捕获的以后，那么这个元素会监听后续发生的
    所有事件，当有事件发生的时候，就会被当前设置了全局捕获的元素所截取，以触发这个元素绑定的事件</p>
    <p>.setCapture(),在IE下有效果，在FF下有这个方法，但是没效果，在chrome下会报错没有这个方法,所以要判断</p>
    <p>.releaseCapture()释放全局捕获</p>

<div id="div1" style=" 100px; height: 100px;background: lightcoral;position:absolute;">
    <img src="" alt='自己添加图片地址'/>
</div>
        <script type="text/javascript">
        window.onload=function(){
            var img=document.getElementsByTagName('img')[0];
            var odiv=document.getElementById('div1');
            img.src='';
            drag(odiv,100,0);
            function drag(obj,width,height){
                obj.onmousedown=function(ev){
                var ev=ev||event;
                var dix=ev.clientX-this.offsetLeft;
                var diy=ev.clientY-this.offsetTop;
                if(obj.setCapture)
                {
                    obj.setCapture();
                }
                document.onmousemove=function(ev){
                    var L=ev.clientX-dix;
                    var T=ev.clientY-diy;
                if(L<width){
                    L=0;
                }else if(L>document.documentElement.clientWidth-obj.offsetWidth){
                    L=document.documentElement.clientWidth-obj.offsetWidth
                }
                if(T<height){
                    T=0;
                }else if(T>document.documentElement.clientHeight-obj.offsetHeight){
                    T=document.documentElement.clientHeight-obj.offsetHeight
                }
                
                    obj.style.left=L+'px';
                    obj.style.top=T+'px';
                }
                document.onmouseup=function(){
                    document.onmousemove=null;
                    if(obj.releaseCapture)
                    {
                        obj.releaseCapture();
                    }
                }
                return false;
            }
            }
        };
        
        
        </script>