嵌套多层的复杂拖动效果
今天因为项目需要，多方查证后，实现了一个最简单的嵌套多层的复杂拖动效果，另外在后面附上了jquery-ui推荐的拖动方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Draggable - Constrain movement</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.outer {
width: 800px;
height: 600px;
border: 1px solid #ccc;
overflow: hidden;
margin: auto;
}
.middle {
width: 200px;
height: 200px;
margin: auto;
overflow: hidden;
border: 1px solid blue;
}
.inside {
width: 50px;
height: 50px;
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="outer">
<div class="middle">
<p class="inside"></p>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function () {
var move = {}, curr;
move.x = move.y = move.mousekey = 0;
$(document).on("mousedown", function (e) {
curr = e.originalEvent.srcElement;//获取当前选中的标签对象
e.stopPropagation(); //阻止事件冒泡（事件穿透）
move.mousekey = true;
$(curr).css("cursor", "move");
$(curr).css('position', 'relative');
$(curr).parent().css('position', 'relative');
var left = $(curr).css("left");
var top = $(curr).css("top");
move.x = e.pageX - parseInt(left == 'auto' ? 0 : left);
move.y = e.pageY - parseInt(top == 'auto' ? 0 : top);
}).on('mouseout', function () {
move.mousekey = false;
$(curr).css("cursor", "default");
}).on('mousemove', function (e) {
if (move.mousekey) {
$(curr).css({ top: e.pageY - move.y, left: e.pageX - move.x });
}
}).on('mouseup', function () {
move.mousekey = false;
$(curr).css("cursor", "default");
});
});
</script>
jquery-ui推荐的拖动方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Constrain movement</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
.outer {
width: 800px;
height: 600px;
border: 1px solid #ccc;
overflow: hidden;
margin: auto;
}
.middle {
width: 200px;
height: 200px;
margin: auto;
overflow: hidden;
border: 1px solid blue;
}
.inside {
width: 50px;
height: 50px;
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="outer">
<div class="middle ui-widget-content">
<p class="inside ui-widget-content"></p>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function () {
$(".middle").draggable();
$(".inside").draggable();
});
</script>
