最近项目需要在twaver拓扑图面板上,单击link时弹出一个浮框,以展示该通道的详细信息,因信息量大,故自定义了一个class为dialog的div。想要实现该框的鼠标拖动效果,代码如下:(只展示了js部分)
//实现可拖动效果 start
$("#dialogHeader").mouseenter(function(e) {
var obj = $('div.dialog');
obj.css({
'left': $('.dialog').offset().left ,
'top': $('.dialog').offset().top
});
});
$("#dialogHeader").mouseout(function() {
var obj = $('div.dialog');
//还原样式,并获取
obj.css({
'left': $('div.dialog').offset().left,
'top': $('div.dialog').offset().top
});
});
$('#dialogHeader').mousedown(
function(event) {
var isMove = true;
var abs_x;
var abs_y;
abs_x = event.pageX - $('div.dialog').offset().left;
abs_y= event.pageY - $('div.dialog').offset().top;
$(document).mousemove(function(event) {
if(isMove) {
var obj = $('.dialog');
obj.css({
'left': event.pageX - abs_x,
'top': event.pageY - abs_y
});
$('#dialogHeader').css({'cursor':'move'});
$('#titleTxt').css({'cursor':'text'});
}}).mouseup(
function() {
isMove = false;
}
);
});
//实现可拖动效果 end
下面是参考的一个demo 的完整代码,需要注意的是,Demo中margin不为零,故有margin的div可以参考。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Qing's Web</title>
<script src="js/jquery-1.11.0.js" type="text/javascript"></script>
<style type="text/css">
.moveBar {
position: absolute;
width: 250px;
height: 300px;
background: #666;
border: solid 1px #000;
margin: 50px;
left:200px;
top:200px;
}
#banner {
background: #52CCCC;
cursor: move;
}
</style>
</head>
<body >
<div class="moveBar">
<div id="banner">按住此处移动当前div</div>
<div class="content">这里是其它内容</div>
</div>
<script>
jQuery(document).ready(
function() {
$('#banner').mousedown(
function(event) {
$(".moveBar").css("margin","0px")
var isMove = true;
var abs_x = event.pageX - ($('div.moveBar').offset().left+50);
var abs_y = event.pageY - ($('div.moveBar').offset().top+50);
$(document).mousemove(function(event) {
if(isMove) {
var obj = $('.moveBar');
obj.css({
'left': event.pageX - abs_x,
'top': event.pageY - abs_y
});
}
}).mouseup(
function() {
var obj = $('.moveBar');
//还原样式,并获取
obj.css({
'left': $('div.moveBar').offset().left-50,
'top': $('div.moveBar').offset().top-50
});
$(".moveBar").css("margin-left","50px")
$(".moveBar").css("margin-top","50px")
isMove = false;
}
);
}
);
}
);
</script>
</body>
</html>