<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. Eclipse用法和技巧十九：eclipse修改workspace

    工作中某一个项目的文件一般都在某一个路径,大多数人都习惯固定eclipse的workspace.不过偶尔也有点别的,比如做一个大项目中穿插着做些OJ,或者别的……这个时候当然可以选择在安装一个ecli ...

  2. ActiveMQ持久化方式(转)

    消息持久性对于可靠消息传递来说应该是一种比较好的方法,有了消息持久化,即使发送者和接受者不是同时在线或者消息中心在发送者发送消息后宕机了,在消息 中心重新启动后仍然可以将消息发送出去,如果把这种持久化 ...

  3. JAVA中extends 与implements有啥区别？

    JAVA中extends 与implements有啥区别?1. 在类的声明中,通过关键字extends来创建一个类的子类.一个类通过关键字implements声明自己使用一个或者多个接口.extend ...

  4. 基于visual Studio2013解决C语言竞赛题之1028平均值

          题目 解决代码及点评 /* 已知有9个数,请求出这些数中的最大值.最小值及平均值,以及有多少个数等于平均值? */ #include<stdio.h> ...

  5. 华为手机logcat不出日志解决方案

    解决方法:在拨打电话界面,录入*#*#2846579#*#* 自动进入开发界面菜单,进入第一个,选择开启logcat.

  6. 09-使用for循环输出空心菱形（循环）

    /** * 使用for循环输出空心菱形 * */ public class Test7 { public static void main(String[] args) { for (int i = ...

  7. 【Tips】Endnote导入IEEE Xplore文献方法《转载》

    1. 在IEEE XPlore中点击“Download Citation”: 2. 选中“Citation & Abstract”和“EndNote,Procite,RefMan”两个选项: ...

  8. PHP学习之-1.5 字符串

    字符串 一个字符串是用双引号扩起来的一个词或者一个句子,比如 "Hello Word" ,你可以使用PHP语言输入这个字符串,像这样 <?php echo "Hel ...

  9. 为什么要用BitSet

    BitSet适用于一类型boolean判断,Java的BitSet在这类型判断中非常高效. 举例说明:在判断前2000万数字中素数个数的程序中,如果使用最基本的素数判断代码: package com; ...

  10. 几种快速傅里叶变换(FFT)的C++实现

    链接:http://blog.csdn.net/zwlforever/archive/2008/03/14/2183049.aspx一篇不错的FFT 文章,收藏一下. DFT的的正变换和反变换分别为( ...