jQuerydiv元素拖动效果代码实例

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了元素的拖动效果。

代码非常的简单,有这方面需求的朋友可以做一下参考。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){ 
  var bool=false;
  var offsetX=0;
  var offsetY=0;
  $("#Drigging").mouseover(function(){
    $(this).css('cursor','move');
  })
  $("#Drigging").mousedown(function(event){ 
    bool=true;
    offsetX = event.offsetX;
    offsetY = event.offsetY;
    $(this).css('cursor','move');
  }).mouseup(function(){
    bool=false;
  })
  $(document).mousemove(function(event){
    if(!bool)
      return;
    var x = event.clientX-offsetX;
    var y = event.clientY-offsetY;
    $("#Drigging").css("left", x);
    $("#Drigging").css("top", y);
    $("#Drigging").css('cursor','move');
  })
})
</script>
</head>
<body>
  <div id="Drigging" style="float:left"></div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).$(function(){}),当文档结构完全加载完毕再去执行函数中的代码。

(2).var bool=false,设置一个标识符,用来说明元素是否可以拖动。

(3).var offsetX=0,声明一个变量并赋值为0,用法后面介绍。

(4).var offsetY=0,同上。

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

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

}),为元素注册mouseover事件处理函数,当鼠标悬浮的时候鼠标指针编程带有四个箭头的那种形状。

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

  bool=true;

  offsetX = event.offsetX;

  offsetY = event.offsetY;

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

}),为元素注册mousedown事件处理函数,也就是当鼠标在元素中按下的时候触发。

bool=true,将bool的值设置为true,也就是元素可以拖动。

(7).offsetX = event.offsetX,获取事件触发时候鼠标指针在元素中的横坐标。

(8).offsetY = event.offsetY,和上面同理,获取纵向坐标。

(9).$(this).css('cursor','move'),设置鼠标指针为带有四个箭头的那种形状。

(10)..mouseup(function(){

  bool=false;

}),注册mouseup事件处理函数,也就是当鼠标案件松开的时候,将bool设置为false,也就是不可拖动。

(11).$(document).mousemove(function(){}),为document对象注册mousemove事件处理函数。

(12).if(!bool) return,如果bool为false,那么直接跳出函数,也就是不可以拖动。

(13).var x = event.clientX-offsetX,获取元素左边缘距离浏览器客户区左边缘的尺寸。

(14).var y = event.clientY-offsetY,后去元素上边缘距离浏览器客户区上边缘的尺寸。

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

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

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

设置相关的样式,因为是绝对定位,所以就实现了拖动效果。

二.相关阅读:

(1).mouseover事件可以参阅jQuery mouseover 事件一章节。

(2).css()方法可以参阅jQuery css()一章节。

(3).mousedown事件可以参阅jQuery mousedown 事件一章节。

(4).mouseup事件可以参阅jQuery mouseup 事件一章节。

(5).mousemove事件可以参阅jQuery mousemove 事件一章节。

(6).clientX可以参阅javascript clientX一章节。

(7).offsetX属性可以参阅javascript offsetX一章节。

回复

我来回复
  • 暂无回复内容