<html>
<head>
<style type="text/css">
.show{
background:#7cd2f8;
width:300px;
height:180px;
text-align:center;
position:absolute;
z-index:1;
left:100px;
top:100px;
}
.show input{
width:100px;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript"><!--
$(document).ready(function()
{
$(".show").mousedown(function(e)//e鼠标事件
{
$(this).css("cursor","move");//改变鼠标指针的形状

var offset = $(this).offset();//DIV在页面的位置
var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离
var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离
$(document).bind("mousemove",function(ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
{
$(".show").stop();//加上这个之后

var _x = ev.pageX - x;//获得X轴方向移动的值
var _y = ev.pageY - y;//获得Y轴方向移动的值

$(".show").animate({left:_x+"px",top:_y+"px"},10);
});

});

$(document).mouseup(function()
{
$(".show").css("cursor","default");
$(this).unbind("mousemove");
})

})
// --></script>
</head>
<body>
<div class="show">
用户名：<input type="text" name="username" /><br />
密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" /><br />
<input type="button" value="提交" onclick="javascript:window.location.href='http://www.163.com';" />
</div>
</body>
</html>

jquery 拖动DIV的更多相关文章

  1. jquery实现DIV层拖动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 基于jquery的可拖动div

    昨天给大家介绍了一款基于jquery ui漂亮的可拖动div实例,今天要给大家分享一款基于jquery的可拖动div.这款可拖动div只要引用jquery就可以,无需引用jquery ui.还实时记录 ...

  3. 一款基于jquery ui漂亮的可拖动div实例

    今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览   ...

  4. jQuery制作div板块拖动层排序

    html结构: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  5. jQuery拖动剪裁图片作为头像

    图片上传是许多网站的一个常用的功能,有时需要对上传的图片做初步的选择裁剪,比如上传头像.下面就是一个使用HTML5+jQuery实现的图片上传裁剪特效,可以对选择要上传的图片做缩小.放大.拖动和裁剪, ...

  6. easyUI draggable插件使用不当，导致拖动div内部文本框无法输入；设置echarts数据为空时就显示空白，不要动画和文字

    先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...

  7. JQuery 拖动层

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. 拖动DIV

    链接:https://www.cnblogs.com/joyco773/p/6519668.html   移动端:div在手机页面上随意拖动   1 <!doctype html> 2 & ...

  9. JS实现拖动div层移动

    JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别----  pageX,pageY,layerX,layerY,clientX,clientY,screen ...

随机推荐

  1. SQL入门学习5-函数、为此、CASE表达式

    6-1. 各种各样的函数 函数的种类 算数函数 字符串函数 日期函数 转换函数 聚合函数 1.1算术函数 数据类型:NUMERIC 是大多数DBMS都支持的一种数据类型. 通过NUMBERIC(全体位 ...

  2. Web 服务器 (IIS) 角色

    原文:Web 服务器 (IIS) 角色 1. 对于默认安装,请在命令行提示符下键入以下命令,然后按 Enter: start /w pkgmgr /iu:IIS-WebServerRole;WAS-W ...

  3. 数组、链表、Hash（转）

    在程序中,存放指定的数据最常用的数据结构有两种:数组和链表. 数组和链表的区别: 1.数组是将元素在内存中连续存放. 链表中的元素在内存中不是顺序存储的,而是通过存在元素中的指针联系到一起. 2.数组 ...

  4. 蜗牛—苍茫IT文章大学的路(十)

    昨晚,有个叫***培训机构鼓吹我们学校.起初我还以为是介绍这个游戏吧.谁知道.它原来是一个培训结构.去年我买的表啊 我知道这会不会去,我也浪费了时间审查.因为今天下午和晚上来测试啊.我没有审查,. 当 ...

  5. apk当安装程序将文件复制到手机自带的指定文件夹

    项目已获得,今天.apk文件以获得另一个非调试手机,发现一个问题. 由于涂料.所以绘图数据的点存储在一个.txt文字档.把它用usb传到指定目录下的,可是明显不科学,由于用户下载了你的.apk文件,你 ...

  6. 汉高澳大利亚sinox接口捆绑经典winxp,全面支持unicode跨语言处理

    用qtconfig(或者qtconfig-qt4)设置字体后,汉澳sinox视窗界面以跟winxp媲美的界面出现,爽心悦目. 并且视窗使用非常稳定.非常少出现死机无响应现象,堪称完美. 引入unico ...

  7. js 正则学习小记之左最长规则

    原文:js 正则学习小记之左最长规则 昨天我在判断正则引擎用到的方法是用 /nfa|nfa not/ 去匹配 "nfa not",得到的结果是 'nfa'.其实我们的本意是想得到整 ...

  8. ural 1932 The Secret of Identifier 容斥

    主题链接:点击打开链接 stl+容斥 #include <cstdio> #include <cstring> #include <algorithm> #incl ...

  9. java编程接口(1) ------ Swing基金会

    本文提出了自己的学习笔记.欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 近期想学下java的界面编程,在此记录下.    大多数的Swing应用都被构 ...

  10. [Linux]使用Clang实现代码静态分析

    1.按下开关Clang sudo apt-get install Clang 2.编写测试程序  memleak.c #include<stdio.h> #include<stdli ...