jQuery控制Div拖拽效果完整实例分析

前端技术 2023/09/07 JavaScript

本文实例讲述了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>
#Drigging {
width:200px;
background:#CCC;
border:solid 1px #666;
height:80px;
line-height:80px;
text-align:center;
position:absolute;
}
</style>
<script src=\"jquery-1.8.2.min.js\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
$(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
})
$(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）
$(\"#Drigging\").css(\"left\", x);
$(\"#Drigging\").css(\"top\", y);
$(\"#Drigging\").css(\'cursor\',\'move\');
})
})
</script>
  </head>
  <body>
    <div id=\"Drigging\" style=\"float:left\">
      拖拽层
    </div>
  </body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/19546

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案