<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. 超详细SDK Hello World

    Windows应用程序的基本运行机制与HelloWin程序详细解 总的来说最基本的Windows应用程序的运行执行顺序总是以如下的基本顺序执行的. 顺序结构: 调用WinMain函数开始执行--à定义 ...

  2. 分布式消息系统jafka快速起步（转）

    Jafka 是一个开源的/性能良好的分布式消息系统.在上一篇文章中有所简单介绍.下面是一篇简单的入门文档.更多详细的文档参考wiki. Step 1: 下载最新的安装包 完整的安装指南在这里.最新的发 ...

  3. [置顶] Windows Phone后台音乐详解一

    应用于: Windows Phone 8 | Windows PhoneOS 7.1 你可以为winphone编写在后台播放音乐的app.这表示即使当用户点击返回或开始按钮离开你的应用界面时,你的应用 ...

  4. MySQL生成-单据号不重复

    需求生成一个单据编号 单据编号结构: “单据类型” + “日期” + “流水号” 例子 : GD201605230000007 代码: DELIMITER $$ CREATE PROCEDURE `y ...

  5. js显示时间

    function nowTime(){ var data= new Date(); var y=data.getFullYear(); var m=parseInt(data.getMonth())+ ...

  6. 11586 - Train Tracks

    Problem J: Train Tracks Andy loves his set of wooden trains and railroad tracks. Each day, Daddy has ...

  7. CppCMS URL使用

    Artyom觉得URL分为三个组成部分: Script_Name / Path_Info ? Query_String 比方以下的: /foo/bar.php/test?x=10 Script_Nam ...

  8. 浅析java的浅拷贝和深拷贝

    Java中任何实现了Cloneable接口的类都可以通过调用clone()方法来复制一份自身然后传给调用者.一般而言,clone()方法满足:       (1) 对任何的对象x,都有x.clone( ...

  9. 跟Google学习Android开发-起始篇-与其它应用程序交互（2）

    6.2从活动获取结果 启动另一个活动不必是单向的.您也可以启动另一个活动,并接收一个结果回来.为了接收一个结果,调用startActivityForResult()(而不是startActivity( ...

  10. Java加入背景音乐

    近期有几个师妹找我给她们的Java期末作业加入背景音乐,非常久不琢磨Java的我花费整晚才搞定,羞愧.在博客中记录下来.警示自己.也帮助一下大家. Java中能够通过AudioClip类来实现音乐播放 ...