您的位置：首页 > Web前端 > JQuery

jquery实现鼠标拖动

2013-06-22 20:27 302 查看 


<html>
<head>
<script type='text/javascript' src='js/jquery-1.5.1.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
var mouseX=0,mouseY=0;
var divLeft,divTop;
$('.dragMe').mousedown(function(e){
mouseX=e.pageX;
mouseY=e.pageY;
var offset=$(this).offset();
divLeft=parseInt(offset.left,10);
divTop=parseInt(offset.top,10);
$(this).bind('mousemove',dragElement);
});
function dragElement(event){
var left=divLeft+(event.pageX-mouseX);
var top=divTop+(event.pageY-mouseY);
$(this).css({
'top': top+'px',
'left': left+'px',
'position':'absolute',
'background-color':'blue'
});
}
$(document).mouseup(function(){
$('.dragMe').unbind('mousemove').css('background-color','#ccc');
});
});
</script>
<style type='text/css'>
div{
background-color:#ccc;
height:200px;
width:300px;
font-color:green;
margin:10px;
float:left;
text-align:center;
}
</style>
</head>
<body>
<div class='dragMe'>Drag ME</div>
<div class="dragMe">Drag Me</div>
</body>
</html>

                                            

                                        

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

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航