<%@ 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. masonry框架的使用之-多个视图的均匀等间距分布

    __weak typeof(self) weakSelf = self; //对self进行weak化,否则造成循环引用无法释放controller UIView * tempView = [[UIV ...

  2. 移植WL18XX到高通的时候，会出现几个.KO文件没有编译出来的情况

    1.检查kernel的.config文件,看是否有CONFIG又恢复了.这个时候就要需找依赖.把依赖使能 2.然后再去驱动源码检查 KCONFIG 的依赖,使能改使能的配置就可以了.

  3. replication factor

    http://www.tuicool.com/articles/RJbIBj 关于Hadoop中replication factor解惑 时间 2014-06-09 08:00:50   ITeye ...

  4. JSON中的特殊字符

    使用JSON从后台向前台传输数据的时候,当数据本身含有一些特殊字符,会导致JSON数据的解析出错.这个时候,就需要将JSON中的特殊字符过滤掉. 用下面的方法对即将向前台输出的json字符串进行处理, ...

  5. 编程实现Windows瞬间关机

    我们先来看看Windows正常的关机流程:①关机指令通知Windows子系统csrss.exe,csrss.exe收到通知后会和Winlogon.exe做一个数据交换,再由Winlogon.exe通知 ...

  6. HTML day01基础总结

    1.网页的基本元素 文字.图像与超链接. 2.每一个网页元素通常由开始标记.结束标记,以及在这两个标记中的内容所组成. 3.一般结构 <html> <head> <met ...

  7. JPA 系列教程9-双向一对一唯一外键

    双向一对一唯一外键的ddl语句 CREATE TABLE `t_person` ( `id` bigint(20) NOT NULL AUTO_INCREMENT, `name` varchar(25 ...

  8. javaweb 国际化

    国际化又称为 i18n:internationalization 软件实现国际化,需具备哪些特征:对于程序中固定使用的文本元素,例如菜单栏.导航条等中使用的文本元素.或错误提示信息,状态信息等,需要根 ...

  9. DEAMONTOOLS: installation

    installing daemontools .. adding -I /usr/include/errno.h to last first line of conf-cc mkdir -p /pac ...

  10. CDockablePane使用总结

    基于 http://blog.csdn.net/kikaylee/article/details/8936953 CDockablePane的基本布局和用法 新建一个SDI工程,在CMainFrame ...