我可以拖动哦！
我可以拖动哦！
我可以拖动哦！
我可以拖动哦！
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.mdiv
{
position: absolute;
border: #808080 solid 1px;
width: 280px;
cursor: pointer;
}.head
{
background-color: #ccc;
width: 100%;
height: 45px;
text-align: center;
line-height: 45px;
}
.body
{
width: 100%;
height: 235px;
background-color:#ffffff;
}.moveDiv
{
border: dashed 2px #ccc;
}
</style>
<script src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var DrgnMove = function (_head, _obj, mode) {
var head = $(_head);
var obj = $(_obj);
var d_x, d_y = 0;
var moveObj;
if (mode == 1) {
obj.on("mousedown", function (e) {
e = e || window.event;
moveObj = obj.clone();
moveObj.css("border", "dashed #808080 2px").appendTo("body");
d_x = e.clientX - $(obj).offset().left;
d_y = e.clientY - $(obj).offset().top;
if (document.body.setCapture) {
document.body.onmousemove = move;
document.body.onmouseup = end;
document.body.setCapture;
} else {
document.addEventListener("mousemove", move, false);
document.addEventListener("mouseup", end, false);
}
});
var move = function (e) {
e = window.event || e;
moveObj.css({ "left": e.clientX - d_x, "top": e.clientY - d_y });
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //防止选择文字
};
var end = function () {
if (document.body.setCapture) {
document.body.onmousemove = null;
document.body.onmouseup = null;
document.body.setCapture;
} else {
document.removeEventListener("mousemove", move, false);
document.removeEventListener("mouseup", end, false);
}
obj.css({ "left": moveObj.css("left"), "top": moveObj.css("top") });
moveObj.remove();
}
} else {
obj.on("mousedown", function (e) {
e = e || window.event;
d_x = e.clientX - $(obj).offset().left;
d_y = e.clientY - $(obj).offset().top;
if (document.body.setCapture) {
document.body.onmousemove = move;
document.body.onmouseup = end;
document.body.setCapture;
} else {
document.addEventListener("mousemove", move, false);
document.addEventListener("mouseup", end, false);
}
});
var move = function (e) {
e = window.event || e;
obj.css({ "left": e.clientX - d_x, "top": e.clientY - d_y });
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //防止选择文字
};
var end = function () {
if (document.body.setCapture) {
document.body.onmousemove = null;
document.body.onmouseup = null;
document.body.setCapture;
} else {
document.removeEventListener("mousemove", move, false);
document.removeEventListener("mouseup", end, false);
}
}
}
}$(function () {
DrgnMove("#mHead", "#mobj", 1);
DrgnMove("#Div2", "#Div1", 2);
DrgnMove("#Div4", "#Div3", 2);
DrgnMove("#Div6", "#Div5", 2);
});
</script></head>
<body>
<script src="http://files.cnblogs.com/wzq806341010/jquery-1.7.2.min.js"></script>
<script src="http://files.cnblogs.com/wzq806341010/DrginMove.js"></script>
<div id="mobj" class="mdiv">
<div id="mHead" class="head">我可以拖动哦！</div>
<div class="body"></div>
</div>
<div id="Div1" class="mdiv">
<div id="Div2" class="head">我可以拖动哦！</div>
<div class="body"></div>
</div>
<div id="Div3" class="mdiv">
<div id="Div4" class="head">我可以拖动哦！</div>
<div class="body"></div>
</div>
<div id="Div5" class="mdiv">
<div id="Div6" class="head">我可以拖动哦！</div>
<div class="body"></div>
</div>
</body>
</html>
拖拽层1.0