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 相关文章推荐
防止文件缓存的js代码
Jan 10 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
vue 动态添加class,三个以上的条件做判断方式
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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
php Rename 更改文件、文件夹名称
2011/05/24 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
js 提交和设置表单的值
2008/12/19 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
python mysqldb连接数据库
2009/03/16 Python
Python运用于数据分析的简单教程
2015/03/27 Python
python编写简单爬虫资料汇总
2016/03/22 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
反洗钱宣传活动总结
2014/08/26 职场文书
公司回复函格式
2015/07/14 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle