<%@ 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. PHP 上传图片，生成水印，支持文字， gif, png

    //admin_upfile.php <html> <meta http-equiv="Content-Type" content="text/html ...

  2. 【转】VC6.0打开或者添加工程文件崩溃的解决方法

    很多学习编程的同学都遇到这样的问题,在Windows操作系统下使用Visual C++ 6.0编程时,如果点击菜单中的[打开]或者[添加],或者按快捷键,都会弹出下图的对话框,出现程序崩溃并退出的情况 ...

  3. HDU1969:Pie(二分)

    Pie Time Limit : 5000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submissio ...

  4. std::function 测试

    #ifndef __HELLOWORLD_SCENE_H__ #define __HELLOWORLD_SCENE_H__ #include "cocos2d.h" typedef ...

  5. Java学习之位运算符

    位运算符:&,|,^,~,<<,>> & (按位与):只有对应的两个二进制位均为1时,结果才为1.例如,9&5,即00001001&000001 ...

  6. 【spring boot】SpringBoot初学（2） - properties配置和读取

    前言 只是简单的properties配置学习,修改部分"约定"改为自定义"配置".真正使用和遇到问题是在细看. 一.主要 核心只是demo中的: @Proper ...

  7. Junit单元测试的简单使用（主要是在spring框架下的项目）

    首先是解释什么是单元测试,单元测试是指对于一个大型项目里,对于单一模块或者单一接口的测试. 然后解释为什么要写单元测试,首先对于一个大型的项目,如果你每次都要重启一遍服务器调页面或者接口的bug,那就 ...

  8. hdu_5720_Wool(脑洞)

    题目连接:hdu_5720_Wool 题意: 给你N个数,然后给你一个区间,问你在这个区间内有多少数可以不与这N个数任选两个出来组成三角形 题解: 这里我还是贴官方的题解算了 考虑三角形三条边a,b, ...

  9. sphinx multi valued filter

    publn_date is multi-valued <?php ini_set('memory_limit', '-1'); ini_set('max_execution_time', '10 ...

  10. elk集成安装配置

    三台虚拟机 193,194,195 本机 78 流程 pythonserver -> nginx -> logstash_shipper->kafka->logstash_in ...