JQuery 拖拽div

来源：互联网发布：如何注销淘宝店铺知乎编辑：程序博客网时间：2024/06/05 10:06

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>拖拽的实现</title>

<style>

#Drigging {

width:200px;

background:#FF4800;

border:solid 3px #FFBD00;

height:80px;

line-height:80px;

text-align:center;

position:absolute;

}

</style>

$(function(){

var bool=false; //标识是否移动元素

var offsetX=0; //声明DIV在当前窗口的Left值

var offsetY=0; //声明DIV在当前窗口的Top值

$("#Drigging").mouseover(function(){

$(this).css('cursor','move');//当鼠标移动到拖拽的DIV上的时候，将鼠标的样式设置为移动(move)

})

$("#Drigging").mousedown(function(){

bool=true; //当鼠标在移动元素按下的时候将bool设定为true

offsetX = event.offsetX;//获取鼠标在当前窗口的相对偏移位置的Left值并赋值给offsetX

offsetY = event.offsetY; //获取鼠在当前窗口的相对偏移位置的Top值并赋值给offsetY

$(this).css('cursor','move');

}).mouseup(function(){

bool=false;////当鼠标在移动元素起来的时候将bool设定为false

})

$("#Drigging").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）

$("#Drigging").css("left", x);

$("#Drigging").css("top", y);

$("#Drigging").css('cursor','move');

})

</script>

</head>

<body>

</body>

</html>

0 0