`
piperzero
  • 浏览: 3477731 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

jquery实现鼠标拖动

 
阅读更多
<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>
分享到：
| jquery中实现全选按钮
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics