<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. html不常见问题汇总

    写html已经好长一段时间了,也遇到了不少问题,跟大家分享下 form是不可以嵌套的 说明:如果嵌套会有很多问题 但是可以并列 <html> <head> </head& ...

  2. SharePoint Search之(两)持续抓取Continues crawl

    于SharePoint 2010与在先前的版本号.有两种类型的抓取,Full和Incremental.故名思议.Full Crawl 抓取的时间.该Content Source里面的内容再次攀升.In ...

  3. wamp You don't have permission to access / on this server等问题的解决.

    原文:wamp You don't have permission to access / on this server等问题的解决. 安装完wamp之后,安装网上的教程设置虚拟路径,出现了问题,同样 ...

  4. JavaEE(20) - Web层和EJB的整合(Entity Manager)

    1. 使用容器管理的EntityManager 2. 使用应用程序管理的EntityManager 3. 使用ThreadLocal保证EntityManager的线程安全 4. EAO封装JPA 5 ...

  5. mariadb 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)

    [root@localhost /]# systemctl stop mariadb.service[root@localhost /]# mysqld_safe --user=mysql --ski ...

  6. ZOJ1610_Count the Colors(段树/为段更新)

    解决报告 意甲冠军: 一定长度8000段染.寻求染色完成后,.. 思路: 区间问题用线段树.成段的更新区间.最后把全部的区间下压到叶子结点,统计叶子结点的颜色. #include <iostre ...

  7. Android经常使用的布局类整理(一)

    Android经常使用的布局类整理 近期又回头做了一下android的项目,发觉越来越不从心,非常多东西都忘了,简单的页面布局也非常多写不出来,首先还是先整理一下一些会混淆的概念先 layout_wi ...

  8. Fireasy

    Fireasy与Asp.net MVC结合   Fireasy之前都是使用HttpService来为jquery ajax提供服务,这个HttpService实际上和MVC的原理机制是一样的,只是它支 ...

  9. java_代码注释风格

    <?xml version="1.0" encoding="UTF-8" standalone="no"?><templa ...

  10. Android基础之——MacOSX下elipse开发环境的配置

    前不久换了台macbook,然后自己就把开发环境给配好了,本来这事就这么过去了,今天有位博友留言让我写一篇关于配置的文章,考虑到这个东西确实以后可能还会用,那就写下来,分享给大家,正好自己也再次回想一 ...