<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. yii组态 redis主从配置（随着代码）

    最近的欲望redis 主从,但yii内建的redis 它不支持主从.不仅写了一个好办法 结构例,以下: 1.main.php通过添加下面的句子: //redis缓存配置 'cache_redis' = ...

  2. UVa 10012 - How Big Is It? 堆球问题 全排列+坐标模拟 数据

    题意:给出几个圆的半径,贴着底下排放在一个长方形里面,求出如何摆放能使长方形底下长度最短. 由于球的个数不会超过8, 所以用全排列一个一个计算底下的长度,然后记录最短就行了. 全排列用next_per ...

  3. 跑ssis分组差错：没有关联“”。假设无法找到一个特定的连接元件,Connections 这种错误发生的收集

    跑ssis分组差错:没有关联"".假设无法找到一个特定的连接元件,Connections 这种错误发生的收集. 在网上搜了一下,解决方法: 打开SqlServer Configur ...

  4. socket抓取网页

    #include <iostream> #include <string> #include <netdb.h> #include <stdio.h> ...

  5. 杭州电 1203 I NEED A OFFER!

    I NEED A OFFER! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  6. 【代码优化】当许多构造函数的参数，请考虑使用builder模式

    静态工厂和构造具有共同的局限性:我们不能扩展到大量的非常好的可选参数. 1.对于多个可选參数的构造器.我们都习惯採用重叠构造器模式.比方一个參数的构造器调用2个參数的构造器.     2个參数的构造器 ...

  7. TextView——setCompoundDrawables说明

    Drawable drawable = mContext.getResources().getDrawable(R.drawable.duringtime);  drawable.setBounds( ...

  8. 至Android虚拟机发送短信和拨打电话

    Android的emulator是已经包括了gsm 模块,能够模拟电话与短信进行调试(就不用花太多冤枉钱) 首先,肯定是打开虚拟机: emulator -avd XXXXXX -scale 0.8&a ...

  9. openstack 网络简史

    openstack 网络简史 研究openstack有2个月的时间,这段时间从网上获取N多宝贵资料,对我的学习有非常大帮助,在加上我自己的研究,最终对openstack整个网络体系有了个浅显的认识,写 ...

  10. PL/SQL 9 许可证

    code:j6stndb9tk72xfbhbqczcdqnjd8lyj466n number:882851 ps:xs374ca 我是PL/SQL版本号是: Version 9.0.3.1641 要注 ...