jquery鼠标随意移动div
2015-06-30 10:17
671 查看
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Qing's Web</title>
<script src="//cdn.bootcss.com/jquery/1.8.0/jquery.js"></script>
<style type="text/css">
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
.moveBar {
position: absolute;
width: 250px;
height: 300px;
background: #666;
border: solid 1px #000;
}
#banner {
background: #52CCCC;
cursor: move;
}
</style>
</head>
<body style="padding-top: 50px;">
<div class="moveBar">
<div id="banner">按住此处移动当前div</div>
<div class="content">这里是其它内容</div>
</div>
<script>
jQuery(document).ready( function () {
$('#banner').mousedown( function (event) {
var isMove = true;
var abs_x = event.pageX - $('div.moveBar').offset().left;
var abs_y = event.pageY - $('div.moveBar').offset().top;
$(document).mousemove(function (event) {
if (isMove) {
var obj = $('div.moveBar');
obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});
}
}).mouseup( function () {
isMove = false;
});
});
});
</script>
</body>
</html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Qing's Web</title>
<script src="//cdn.bootcss.com/jquery/1.8.0/jquery.js"></script>
<style type="text/css">
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
.moveBar {
position: absolute;
width: 250px;
height: 300px;
background: #666;
border: solid 1px #000;
}
#banner {
background: #52CCCC;
cursor: move;
}
</style>
</head>
<body style="padding-top: 50px;">
<div class="moveBar">
<div id="banner">按住此处移动当前div</div>
<div class="content">这里是其它内容</div>
</div>
<script>
jQuery(document).ready( function () {
$('#banner').mousedown( function (event) {
var isMove = true;
var abs_x = event.pageX - $('div.moveBar').offset().left;
var abs_y = event.pageY - $('div.moveBar').offset().top;
$(document).mousemove(function (event) {
if (isMove) {
var obj = $('div.moveBar');
obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});
}
}).mouseup( function () {
isMove = false;
});
});
});
</script>
</body>
</html>
相关文章推荐
- jQuery入门:避免和其他库冲突
- 使用jQuery在对象中缓存选择器的简单方法
- jquery ajax禁用缓存解决ie数据不更新的问题
- 导航菜单:jQuery粘性滚动导航栏效果
- jquery,get方式提交中文数据时乱码
- jQuery 备忘
- jquery操作select(取值,设置选中) 取得已选的值
- 使用jQuery在对象中缓存选择器的简单方法
- jQuery结合AJAX之在页面滚动时从服务器加载数据
- jquery deferred
- jquery技巧
- jquery 框架页面 操作 顶层窗体中元素,或者其他框架页面中元素
- JQuery淡入淡出小Demo
- jquery入门例子
- 使用jquery.uploadify丢失session信息
- jQuery筛选器及对DOM修改(学习笔记)
- 使用JQueryMobile时js文件报错,保存时总弹错误消息框
- jQuery验证邮箱手机
- jquery学习基础(二)
- jQuery EasyUI Combobox 无法获取属性 options 的值: 对象为 null 或未定义