<%@ 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. iperf linux版本移植到android (使用工具链方式不是使用Android.mk)

    由于很多程序是用makefile编译linux应用程序的,如果移植到android就要重新写Android.mk,对于不熟悉这个的人来说,特别麻烦,所以这里介绍只修改makefile就能移植到andr ...

  2. jquery 简单的栏目切换

    <style> ul{ list-style:none; padding:0px; margin:0px;} #nav_box{ width:502px; height:402px; ov ...

  3. F(k)<(维护+枚举)\(找规律+递推+枚举)>

    题意 小明有一个不降序列(f(1),f(2),f(3),--),f(k)代表在这个序列中大小是k的有f(k)个.我们规定f(n)的前12项如下图. n 1 2 3 4 5 6 7 8 9 10 11 ...

  4. lucene-SpanQuery跨度查询基础

    1.跨度查询SpanQuery5个子类 SpanQuery类型                            描述 SpanTermQuery                和其他跨度查询结合 ...

  5. EDA 事件驱动框架

    事件代表过去发生的事件,事件既是技术架构概念,也是业务概念.以事件为驱动的编程模型称为事件驱动架构EDA. EDA是一种以事件为媒介,实现组件或服务之间最大松耦合的方式.传统面向接口编程是以接口为媒介 ...

  6. Mysql limit性能优化（小offset与大offset）

    MySQL的优化是非常重要的.其他最常用也最需要优化的就是limit.MySQL的limit给分页带来了极大的方便,但数据量一大的时候,limit的性能就急剧下降.   同样是取10条数据 selec ...

  7. Sublime Text 3 安装使用

    机器比较老,运行Pycharm等卡死,所以选择Sublime,非常流畅. 安装 版本3103 官网下载安装 注册码: —– BEGIN LICENSE —–Nicolas HennionSingle ...

  8. 笔记整理--Http-Cookie

    如何设置一个永远无法删除的Cookie -- 系统架构 -- IT技术博客大学习 -- 共学习 共进步! - Google Chrome (2013/6/20 9:46:38) 如何设置一个永远无法删 ...

  9. asp 正则替换函数

    Function RegExpTest(patrn,str1,strng) Dim regEx',str1 ' 建立变量 'str1 = "The quick brown fox jumpe ...

  10. php五大运行模式CGI,FAST-CGI,CLI,ISAPI,APACHE模式浅谈

    做 php 开发的应该都知道 php 运行模式概念吧,本文将要和大家分享的是关于php目前比较常见的五大运行模式:包括cgi .fast-cgi.cli.isapi.apache模块的DLL ,下面作 ...