jQuery实现简单的DIV拖动效果


Posted in Javascript onFebruary 19, 2016

本文实例讲述了jQuery实现简单的DIV拖动效果。分享给大家供大家参考,具体如下:

创建一个HTML文件,复制以下代码进去,修改jquery文件(没有的到网上去下一个,我使用的是jquery-1.8.2),即可以运行了

<!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=gb2312" />
<title>Jquery:鼠标拖动DIV</title>
<style type="text/css">
  div#computerMove{
    position:absolute;
    top:50px;
    left:50px;
    width:200px;
    height:30px;
    line-height:30px;
    background-color:#00CCCC;
    text-align:center;
    color:#FFFFFF;
    cursor:default;
  }
</style>
</head>
<body>
  <div id="computerMove">点击我拖动</div>
  <script src="jquery-1.8.2.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      var $div = $("div#computerMove");
      /* 绑定鼠标左键按住事件 */
      $div.bind("mousedown",function(event){
        /* 获取需要拖动节点的坐标 */
        var offset_x = $(this)[0].offsetLeft;//x坐标
        var offset_y = $(this)[0].offsetTop;//y坐标
        /* 获取当前鼠标的坐标 */
        var mouse_x = event.pageX;
        var mouse_y = event.pageY;
        /* 绑定拖动事件 */
        /* 由于拖动时,可能鼠标会移出元素,所以应该使用全局(document)元素 */
        $(document).bind("mousemove",function(ev){
          /* 计算鼠标移动了的位置 */
          var _x = ev.pageX - mouse_x;
          var _y = ev.pageY - mouse_y;
          /* 设置移动后的元素坐标 */
          var now_x = (offset_x + _x ) + "px";
          var now_y = (offset_y + _y ) + "px";
          /* 改变目标元素的位置 */
          $div.css({
            top:now_y,
            left:now_x
          });
        });
      });
      /* 当鼠标左键松开,接触事件绑定 */
      $(document).bind("mouseup",function(){
        $(this).unbind("mousemove");
      });
    })
  </script>
</body>
</html>

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

Javascript 相关文章推荐
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
Ant design vue中的联动选择取消操作
Oct 31 Javascript
vue+iview使用树形控件的具体使用
Nov 02 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 #Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 #Javascript
基于JavaScript实现弹出框效果
Feb 19 #Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 #Javascript
学习javascript文件加载优化
Feb 19 #Javascript
初识angular框架后的所思所想
Feb 19 #Javascript
复杂的javascript窗口分帧解析
Feb 19 #Javascript
You might like
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
php获取图片信息的方法详解
2015/12/10 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
Python for i in range ()用法详解
2020/09/18 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
工作失职检讨书范文
2014/01/16 职场文书
趣味游戏活动方案
2014/02/07 职场文书
道德模范先进事迹
2014/02/14 职场文书
《小草和大树》教学反思
2014/02/16 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
2014年行政部工作总结
2014/11/19 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
大学生受助感言
2015/08/01 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript