标签：
//JQuery 拖拽本体DIV，把以下代码全部复制即可
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#Dialog {
width:200px;
background:#CCC;
border:solid 1px #666;
height:80px;
line-height:80px;
text-align:center;
position:absolute;
}
</style>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
DivertDialog($(‘#Dialog‘));
});
var DivertDialog = function (obj) {
var offsetX = obj.offset().left;
var offsetY = obj.offset().top;
obj.mousedown(function () {
obj.css(‘cursor‘, ‘move‘);
bool = true;
var offsetX = event.offsetX;
var offsetY = event.offsetY;
obj.bind("mousemove", function () {
if (bool) {
var x = event.clientX - offsetX;
var y = event.clientY - offsetY;
obj.css(‘left‘, x);
obj.css(‘top‘, y);
}
});
}).mouseup(function () {
obj.css(‘cursor‘, ‘default‘);
obj.unbind("mousemove");
});
};
</script>
</head>
<body>
<div id="Dialog" style="float:left">拖拽层</div>
</body>
</html>
//JQuery 拖拽DIV，相当于重新复制了一个，原来的DIV不动，而对clone的DIV进行拖拽
//同样把以下代码全部复制即可
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#Drigging1 {
width:200px;
background:#CCC;
border:solid 1px #666;
height:80px;
line-height:80px;
text-align:center;
position:absolute;
}
#Drigging2 {
width:200px;
background:#CCC;
border:solid 1px #666;
height:80px;
line-height:80px;
text-align:center;
position:absolute;
left: 16px;
top: 105px;
}
</style>
<script src="Jquery-1-5-2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var cloneDiv="";
var bool=false; //标识是否移动元素
var offsetX=0; //声明DIV在当前窗口的Left值
var offsetY=0; //声明DIV在当前窗口的Top值
function clones()
{
cloneDiv = $("#Drigging").clone(true).appendTo("body");
}
$("#Drigging div").mouseover(function(){
$(this).css(‘cursor‘,‘move‘);//当鼠标移动到拖拽的DIV上的时候，将鼠标的样式设置为移动(move)
})
$("#Drigging div").mousedown(function(){
bool=true; //当鼠标在移动元素按下的时候将bool设定为true
offsetX = event.offsetX;//获取鼠标在当前窗口的相对偏移位置的Left值并赋值给offsetX
offsetY = event.offsetY; //获取鼠在当前窗口的相对偏移位置的Top值并赋值给offsetY
$(this).css(‘cursor‘,‘move‘);
if($(this).attr("class") == "clones")
{
cloneDiv = $(this);
}else
{
cloneDiv = $(this).clone(true).addClass("clones").appendTo("body");
}
//setTimeout("clones()",1000);
}).mouseup(function(){
bool=false;////当鼠标在移动元素起来的时候将bool设定为false
})
$(document).mousemove(function(){
if(!bool)//如果bool为false则返回
return;
//当bool为true的时候执行下面的代码
var x = event.clientX-offsetX; //event.clientX得到鼠标相对于客户端正文区域的偏移，然后减去offsetX即得到当前推拽元素相对于当前窗口的X值（减去鼠标刚开始拖动的时候在当前窗口的偏移X）
var y = event.clientY-offsetY; //event.clientY得到鼠标相对于客户端正文区域的偏移，然后减去offsetX即得到当前推拽元素相对于当前窗口的Y值（减去鼠标刚开始拖动的时候在当前窗口的偏移Y）
cloneDiv.css({left:x,top:y});
//$("#Drigging").css("left", x);
// $("#Drigging").css("top", y);
$("#Drigging").css(‘cursor‘,‘move‘);
})
})
</script>
</head>
<body>
<div id="Drigging">
<div id="Drigging1" style="float:left">拖拽层</div>
<div id="Drigging2" style="float:left">拖拽层1</div>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/joyang/p/4953858.html
