您的位置：首页 > 编程语言 > Java开发

div 移动 drag

2015-09-09 17:03 381 查看

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>drag</title>
<style type="text/css">
#showDiv{
width: 300px;
height: 300px;
border: 1px solid;
position:absolute;
background: gray;
left: 800px;
top: 300px;
}
</style>
</head>
<body>
<div id="showDiv">
dragHTML
</div>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
jQuery.fn.extend({
drag: function() {
var obj = $(this);
obj.mousedown(function(e) { // e鼠标事件
$(this).css("cursor", "move"); // 改变鼠标指针的形状
var offset = $(this).offset(); // DIV在页面的位置
var x = e.pageX - offset.left; // 获得鼠标指针离DIV元素左边界的距离
var y = e.pageY - offset.top; // 获得鼠标指针离DIV元素上边界的距离
$(document).bind("mousemove", function(ev) { // 绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
obj.stop(); // 加上这个之后
var _x = ev.pageX - x; // 获得X轴方向移动的值
var _y = ev.pageY - y; // 获得Y轴方向移动的值
obj.animate({
left: _x + "px",
top: _y + "px"
}, 10);
});

});
$(document).mouseup(function() {
obj.css("cursor", "default");
$(this).unbind("mousemove");
});
}
});
$("#showDiv").drag();
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js div html javascript drag

相关文章推荐

新的分享

章节导航