<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
  </head>
  
  <style>  
.Drigging{  
width:200px;  
background:#CCC;  
border:solid 1px #666;  
height:80px;  
line-height:80px;  
text-align:center;  
position:absolute;  
}  
</style>  
    <script type="text/javascript" src="<%=basePath%>js/jquery-1.9.0.js"></script> 
<script type="text/javascript">  
$(function(){  
var bool=false;  
var offsetX=0;  
var offsetY=0;  
$(".Drigging").mousedown(function(){  
bool=true;  
offsetX = event.offsetX;  
offsetY = event.offsetY;  
$(this).css('cursor','move');  
})  
.mouseup(function(){  
bool=false;  
});
$(document).mousemove(function(e){  
if(!bool)  
return;  
var x = event.clientX-offsetX;  
var y = event.clientY-offsetY;  
$(".Drigging").css("left", x);  
$(".Drigging").css("top", y);  
});
}); 
</script>  
<body>    <div class="Drigging">终于可以拖动啦,其实很简单</div></body>
</html>

Jquery实现鼠标拖拽效果的更多相关文章

  1. js 鼠标拖拽效果实现

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. JavaScript：鼠标拖拽效果

    (之前的那个模板方法模式实在没搞懂...等几天再去研究8) 预览效果: 限制拖动范围在视口内.调整窗口时自动居中... <!DOCTYPE html> <html lang=&quo ...

  3. 用JavaScript实现div的鼠标拖拽效果

    实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class=&qu ...

  4. jQuery的DOM操作实例（2）——拖拽效果&&拓展插件

    一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件

  5. JavaScript鼠标拖拽特效及相关问题总结

    #div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...

  6. 一款基于jQuery的支持鼠标拖拽滑动焦点图

    记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...

  7. 完美实现鼠标拖拽事件，解决各种小bug，基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

  8. jquery监听事件on写法以及简单的拖拽效果

    引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...

  9. Ant Design -- 图片可拖拽效果，图片跟随鼠标移动

    Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(pro ...

随机推荐

  1. MyBatis-配置缓存

    <cache type="org.mybatis.caches.ehcache.LoggingEhcache"> <property name="tim ...

  2. 建立TCP连接的三次握手

    请求端(通常称为客户)发送一个 SYN 报文段( SYN 为 1 )指明客户打算连接的服务器的端口,以及初始顺序号( ISN ).服务器发回包含服务器的初始顺序号( ISN )的 SYN 报文段( S ...

  3. Jquery 实现原理之 Ajax

    一:Jquery Ajax底层接口有:$.ajaxPrefilters.$.ajaxTransport.$.ajaxSettings.$ajaxSetup.$ajaxSettings; 其中$.aja ...

  4. 【java】基础中的杂乱总结（二）

    1 内部类进阶 package package8; //原则:先用内部类写 之后由于内部类匿名无法引用 用其继承的父类或实现的接口名 //再复写所有的抽象方法即可(是所有,否者还是抽象的,无法创建对象 ...

  5. 解决centos无法上传文件和打开文件夹

    使用yum搭建了ftp服务..yum的使用参考:http://blog.csdn.net/enson16855/article/details/9140623 windows使用FileZilla连接 ...

  6. IO流的操作规律

    输入流和输出流相对于内存设备而言. 将外设中的数据读取到内存中:输入将内存的数写入到外设中:输出. 字符流的由来:其实就是:字节流读取文字字节数据后,不直接操作而是先查指定的编码表.获取对应的文字.在 ...

  7. phpmyadmin配置方式

    简单的说,phpmyadmin就是一种mysql的管理工具,安装该工具后,即可以通过web形式直接管理mysql数据,而不需要通过执行系统命令来管理,非常适合对数据库操作命令不熟悉的数据库管理者,下面 ...

  8. MySQ安装

    1.去官网下载安装包 .http://www.mysql.com/downloads/ 2.安装过程中会出现下面的提示:记得保存你的MySQL的初始的默认密码.如果没有注意,那么恢复起来有点麻烦,后续 ...

  9. 两个byte[]拼接

    //两个byte[]拼接 public byte[] copybyte(byte[] a, byte[] b, byte[] c, byte[] d, byte[] e)///,byte[] f,by ...

  10. hdu_1007_Quoit Design(最近点对)

    题目连接:hdu_1007_Quoit Design 题意: 给你平面上的一些点,让你找出这些点的最近点对的距离 题解: 采用分治,达到O(nlognlogn)的时间复杂度就能艹过去了 #includ ...