您的位置：首页 > 其它

拖拽原理

2017-05-26 14:29 78 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽原理</title>
<style>
#div1{
width:100px;
height:100px;
background:red;
position:absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
onmousedown:鼠标按下时触发
onmousemove:鼠标移动时触发
onmouseup:鼠标抬起时触发
*/
var oDiv = document.getElementById("div1");
oDiv .onmousedown = function(ev){
var ev = ev||event;
var disX = ev.clientX-this.offsetLeft;
var disY = ev.clientY-this.offsetTop;
if(oDiv.setCapture){
oDiv.setCapture();
}
document.onmousemove= function(ev){
var ev = ev||event;
oDiv.style.left= ev.clientX-disX+"px";
oDiv.style.top= ev.clientY-disY+"px";
}
document.onmouseup = function(){
document.onmousemove = null;
if(oDiv.releaseCapture){
oDiv.releaseCapture();
}
}
return false;//取消浏览器默认拖拽文字行为
}
}
/*
obj.setCapture(); 设置全局捕获，当我们给一个元素设置全局捕获以后，那么这个元素就会
监听后续发生的所有事件，当有事件发生的时候，就会被当前设置全局捕获的元素所触发。
ie：有，并且有效果
ff：有，但是没效果
chrome:没有，会报错
obj.releaseCapture()释放全局捕获
*/
/*
拖拽的时候，如果有文字被选中，会产生问题
原因：当鼠标按下的时候（按下时触发），如果页面中有文字被选中，那么会触发浏览器的默认拖拽文字行为。
解决：
标准：阻止默认行为
非标准ie:用全局捕获
拖拽图片有问题，解决办法同上
*/
</script>
</head>
<body>
拖拽文字在此
<div id="div1"></div>
</body>
</html>



是
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                事件
                                                拖拽
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航