<html>
  <head>

  <script type='text/javascript' src='js/jquery-1.5.1.js'></script>

  <script type='text/javascript'>

    $(document).ready(function(){

     var mouseX=0,mouseY=0;

  var divLeft,divTop;

    $('.dragMe').mousedown(function(e){

     mouseX=e.pageX;

  mouseY=e.pageY;

  var offset=$(this).offset();

  divLeft=parseInt(offset.left,10);

  divTop=parseInt(offset.top,10);

  $(this).bind('mousemove',dragElement);

  });

    function dragElement(event){

     var left=divLeft+(event.pageX-mouseX);

  var top=divTop+(event.pageY-mouseY);

  $(this).css({

  'top': top+'px',

  'left': left+'px',

  'position':'absolute',

     'background-color':'blue'

  });

  }

   $(document).mouseup(function(){

     $('.dragMe').unbind('mousemove').css('background-color','#ccc');

  });

 });

  </script> 

  <style type='text/css'>

    div{

    background-color:#ccc;

    height:200px;

    width:300px;

    font-color:green;

    margin:10px;

    float:left;

    text-align:center;

    }

  </style>

  </head>

  <body>

    <div class='dragMe'>Drag ME</div>

 <div class="dragMe">Drag Me</div>

  </body>

 </html>

jquery实现鼠标拖动的更多相关文章

  1. jQuery实现鼠标拖动改变Div高度

    最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...

  2. jquery 鼠标拖动排序Li或Table

    1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Ta ...

  3. JavaScript 实现鼠标拖动元素

    一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.f ...

  4. 基于jquery的可拖动div

    昨天给大家介绍了一款基于jquery ui漂亮的可拖动div实例,今天要给大家分享一款基于jquery的可拖动div.这款可拖动div只要引用jquery就可以,无需引用jquery ui.还实时记录 ...

  5. 用canvas实现鼠标拖动绘制矩形框

    需要用到jCanvas插件和jQuery. jCanvas下载:https://raw.githubusercontent.com/caleb531/jcanvas/master/jcanvas.mi ...

  6. js进阶 12-17 jquery实现鼠标左键按下拖拽功能

    js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...

  7. jquery-11 如何实现标签的鼠标拖动效果

    jquery-11 如何实现标签的鼠标拖动效果 一.总结 一句话总结:核心原理:1.标签实现绝对定位,位置的话跟着鼠标走.2.点击标签的话,给标签绑定事件,停止按住鼠标的话,解除绑定的事件. 1.事件 ...

  8. CSharpGL(39)GLSL光照示例：鼠标拖动太阳（光源）观察平行光的漫反射和镜面反射效果

    CSharpGL(39)GLSL光照示例:鼠标拖动太阳(光源)观察平行光的漫反射和镜面反射效果 开始 一图抵千言.首先来看鼠标拖动太阳(光源)的情形. 然后是鼠标拖拽旋转模型的情形. 然后我们移动摄像 ...

  9. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

随机推荐

  1. 金额的计算BigDecimal类

    金额的计算BigDecimal类 double d = 9.84; double d2 = 1.22; //注意需要使用BigDecimal(String val)构造方法 BigDecimal bi ...

  2. android的单元测试

    1.新建android Test project 2. 选择针对测试的项目 3.新建类继承AndroidTestCase即可: package com.howlaa.sms.test; import ...

  3. makefile 必知必会

    Makefile 必知必会 Makefile的根本任务是根据规则生成目标文件. 规则 一条规则包含三个:目标文件,目标文件依赖的文件,更新(或生成)目标文件的命令. 规则: <目标文件>: ...

  4. Qt遍历图片文件

    原地址:http://blog.sina.com.cn/s/blog_5c70dfc80100tgff.html //实现遍历某个文件下的图片文件 //如果想遍历其余类型文件,方法也一样,只需简单修改 ...

  5. Linux 安装Redis全过程日志

    wget http://download.redis.io/redis-stable.tar.gz tar xvzf redis-stable.tar.gz cd redis-stable make ...

  6. Boost::Thread 多线程的基础知识

    Boost.Thread可以使用多线程执行可移植C++代码中的共享数据.它提供了一些类和函数来管理线程本身,还有其它一些为了实现在线程之间同步数据或者提供针对特定单个线程的数据拷贝.头文件:#incl ...

  7. LINUX 命令行编辑

    向          <-前               后 -> 删除 ctrl + d      删除光标所在位置上的字符相当于VIM里x或者dl ctrl + h      删除光标 ...

  8. EasyUI - 要引入的JS文件

    引入的JS: 使用时候修改路径. <script src="../Quote/EasyUI/locale/easyui-lang-zh_CN.js"></scri ...

  9. python httpConnection详解

    模块urllib,urllib2,httplib的区别 httplib实现了http和https的客户端协议,但是在python中,模块urllib和urllib2对httplib进行了更上层的封装. ...

  10. uva 10603

    紫皮书的例题 照着敲了一遍,非原创 大题思路主要是三杯水,而水的总数是知道的,相当于知道第一第二杯水的体积,第三杯水的体积也就确定了. 用第一第二杯水的体积来标记数组是否遍历过 优先队列来找移动体积最 ...