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插件之自动添加删除行的实现
Oct 13 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
如何理解Vue简单状态管理之store模式
May 15 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
建立文件交换功能的脚本(二)
2006/10/09 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
js实现数组转换成json
2015/06/26 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
require.js中的define函数详解
2017/07/10 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
Python smallseg分词用法实例分析
2015/05/28 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
简述Python2与Python3的不同点
2018/01/21 Python
详解爬虫被封的问题
2019/04/23 Python
Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题
2019/07/04 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Python获取时间戳代码实例
2019/09/24 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
python实现XML解析的方法解析
2019/11/16 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
时尚休闲吧创业计划书
2014/01/25 职场文书
小组口号大全
2014/06/09 职场文书
实习介绍信范文
2015/05/05 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android