您的位置：首页 > 教程笔记 > 前端笔记

jQuerydiv元素拖动效果代码实例

2023-12-04 13:49:29 前端笔记 189

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

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

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/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一章节。

##
声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至201542412@QQ.com举报，一经查实，本站将立刻删除。

上一篇：jquery自动走动的圆形钟表效果代码实例

下一篇：javascript类式继承设计模式简单介绍

相关推荐

最新推荐

热门推荐