<%@ 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. HDU 1155 Bungee Jumping 物理

    题目大意:给出k:绳子的劲度系数,l:绳长,s:桥高,w:邦德的质量,g取9.81.绳子弹力=形变量*劲度系数.如果落地速度大于10 则摔死,小于0则飘着空中. 题目思路:根据能量守恒得知:落地的动能 ...

  2. hdu1950 Bridging signals 最长递增子序列

    用一个数组记下递增子序列长度为i时最小的len[i],不断更新len数组,最大的i即为最长递增子序列的长度 #include<cstdio> #include<algorithm&g ...

  3. runtime获取一个控件的所有属性

    控件的有些属性API并没有开放,可以通过runtime查看: unsigned int count; Ivar *ivarList = class_copyIvarList([UITextField ...

  4. JavaScript（2）——对象属性、原型与原型链

    对象属性.原型与原型链 哈哈哈,我的第二篇博客哟,说的是对象属性.原型与原型链.可能这些只是某些小点串联起来的,逻辑性没有很强.所以会对文章的可读性和理解性带来一些困扰.不过,今天我又前进了那么一小步 ...

  5. tensorflow源代码方式安装

    本文介绍tensorflow源代码方式安装.安装的系统为 Ubuntu 15.04. 获取TensorFlow源代码 git clone --recurse-submodules https://gi ...

  6. Jenkins设置Poll SCM

    */5 * * * *  (每5分钟执行一次) 0 20 * * *   每天 20点执行定时build # every fifteen minutes (perhaps at :07, :22, : ...

  7. android代码实现免提功能

    初始化AudioManager: private static AudioManager audioManager; 实现免提功能方法 protected void setSpeekModle() { ...

  8. Android Studio相关的坑

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  9. 使用nginx简单实现负载均衡

    只是简单使用nginx玩玩而已,知道能这么用,但是在实际项目中并没有实践过,在项目不大的时候用不到,但是对于理解负载均衡来说还是可以的. 利用虚拟机安装了三个centOS系统,然后顺便装了环境. 这里 ...

  10. 一个appium 博客

    http://www.cnblogs.com/tobecrazy/category/699177.html appium Java控制Appium server start/stop 摘要: 相信很多 ...