<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分析器——jericho-html-3.3分解table

    原部分来自Internet上的其他博客,只是因为很长一段时间.忘了谁是参考,这里说声抱歉.. 先贴一些html页: <html> <head> <meta http-eq ...

  2. JQuery读取Exif信息

    <!DOCTYPE html> <html> <head> <script type="text/javascript" src=&quo ...

  3. Java多线程之Lock的使用（转）

    package thread.lock; import java.util.concurrent.ExecutorService; import java.util.concurrent.Execut ...

  4. POJ - 2828 Buy Tickets (段树单点更新)

    Description Railway tickets were difficult to buy around the Lunar New Year in China, so we must get ...

  5. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

  6. SQL Server 备份和还原

    SQL Server 备份和还原   SQL Server 备份 恢复模式 SQL Server 数据恢复模式分为三种:完整恢复模式.大容量日志恢复模式.简单恢复模式. 完整恢复模式 默认的恢复模式, ...

  7. Notepad++ 经常使用快捷键 (MEMO）

    最近的一项研究Lua,使用Notepad++ 作为编译器. 今天早上无意中按下 Ctrl+D ,.突然认为Notepad++ 这东西非常奇妙. 网上查找了Notepad++的快捷键,尝试 Ctrl+Q ...

  8. SVN常见错误两项纪录

    1.svn cleanup failed–previous operation has not finished; run cleanup if it was interrupted 也许前clean ...

  9. 【C语言的日常实践（八）】弦

    串数据类型是一个重要的,但C有没有明确的语言字符串数据类型.头文件string.h它包括大多数字符串处理函数. 故,有操作的串.通常包括string.h头文件. 1.字符串的长度:对字符串进行的操作中 ...

  10. Oracle中使用Entity Framework 6.x Code-First

    Oracle中使用Entity Framework 6.x Code-First方式开发 去年写过一篇EF的简单学习笔记,当时EF还不支持Oracle的Code-First开发模式,今天无意又看了下O ...