<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. jquery 中获取所有选中的checkbox的用法

    以往还错误的把$("input[type='checkbox'][checked]") 是正确的用法,奇怪的是:这样用之前确实是好用的,单当我页面中的html内容超过1000行时, ...

  2. 基于visual Studio2013解决C语言竞赛题之1047百马问题

      题目 解决代码及点评 /* 47.马百瓦问题.有100匹马,100块瓦,大马驮3块, 小马驮2块,两个马驹驮1块.问大马.小马.马驹各多少? 要求:① 不许用for循环; ② 循环次数 ...

  3. 以交互方式使用exp/imp的演示

    众所周知,用exp/imp对数据库进行逻辑备份.包含表.用户,整个数据库,我们通常所熟悉的是使用命令行指定參数的方式来做的.以下我来演示一下不太经常使用的以交互方式的操作,操作非常easy.就是仅仅要 ...

  4. RS100项目进展更新

    1. 添加手机界面访问网页,毕竟PDA的屏幕大小和PC机大小不一致,完成了一自适应网页,便于在手机上观看实时画面: 2. 此项目为一个远程视频监控+远程开关项目,远程PC机或者手机能操作到监控端的开关 ...

  5. COM实现过程

    前言 COM已经成为一个必需的东西了.在我们周围,可以说处处充满了COM – 如果你是在使用WINDOWS,并在其下面编写程序的话.然而,无论你是用VC,还是使用DELPHI进行COM编程时,在大多数 ...

  6. Windows Azure入门教学系列 (八)：使用Windows Azure Drive

    我们知道,由于云端的特殊性,通常情况下,对文件系统的读写建议使用Blob Storage来代替.这就产生了一个问题:对于一个已经写好的本地应用程序,其中使用了NTFS API对本地文件系统读写的代码是 ...

  7. Swift - 使用Auto Layout和Size Classes实现页面自适应弹性布局

    在过去只有iphone4的时候,可以在代码里将一个可视单元的位置写死,这样是没问题的,但随着iPhone5,6的发布,屏幕尺寸有了越来越多种可能.这就要求App的UI控件具有在不同屏幕尺寸的设备上具有 ...

  8. 微信支付[v3]

    原文:微信支付[v3] V2升级V3 顺便记录一下 ,文档: http://pay.weixin.qq.com/wiki/doc/api/index.html !!! 支付授权目录与测试人的微信帐号白 ...

  9. metasploit学习之ms03_026

    傻瓜式利用ms03_026_dcom: Matching Modules ================ Name Disclosure Date Rank Description ---- --- ...

  10. hdu 4714 Tree2cycle dp

    用树形dp做的,dp[t][i]表示t及其孩子入度都已经小于等于2并且t这个节点的入度等于i的最优解. 那么转移什么的自己想想就能明白了. 关键在于这个题目会暴栈,所以我用了一次bfs搜索出节点的顺序 ...