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 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
js中function()使用方法
Dec 24 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
js实现简单抽奖功能
Nov 24 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+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
客户端静态页面玩分页
2006/06/26 Javascript
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
tab栏切换原理
2017/03/22 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
老生常谈Python进阶之装饰器
2017/05/11 Python
Python常见数据类型转换操作示例
2019/05/08 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
银行求职推荐信范文
2013/11/30 职场文书
原材料检验岗位职责
2014/03/15 职场文书
演讲稿的写法
2014/05/19 职场文书
党员教师一句话承诺
2014/05/30 职场文书
ktv好的活动方案
2014/08/15 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python