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 相关文章推荐
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
夯基础之手撕javascript继承详解
Nov 09 Javascript
vue实现登录功能
Dec 31 Vue.js
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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
javascript中length属性的探索
2011/07/31 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
python实现图片中文字分割效果
2019/07/22 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
建材投资建议书
2014/05/16 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
JS数组去重详情
2021/11/07 Javascript
Vue h函数的使用详解
2022/02/18 Vue.js
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript