<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. windows下一个，OracleServiceXXX和Oracle 关系实例

    其实,windows下的oracle,在oracle实例启动时,是全然依赖于 window服务中的OracleServiceXXX .这个XXX就是oracle的实例名(注意啊,不是数据库名称,而是实 ...

  2. 兼容的网页宽度margin padding

    hack兼容: -moz-  /* Firefox 4 */ -webkit- /* Safari 和 Chrome */ -o-  /* Opera */ IE6承认*和_和+,不承认!import ...

  3. Flex TextInput 动态推断输入内容

    Flex TextInput 动态推断输入内容 <? xml version="1.0" encoding="utf-8"?> <s:Appl ...

  4. PL/SQL Developer下设置“长SQL自己主动换行”

    ***********************************************声明*************************************************** ...

  5. Json.Net6.0入门学习试水篇

    原文:Json.Net6.0入门学习试水篇 前言 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.简单地说,JSON 可以将 JavaScript 对象中 ...

  6. android 有效载荷大图,避OOM

    我们的项目往往会载入图片.有时,承担太多,再装图片,它导致了非常小的程序卡,而在铅oom从而导致异常app再见,今天翻译google官方网站,它已经做了很好的图像处理汇总,由于Google我们已经给解 ...

  7. Spark里边：到底是什么RDD

    RDD它是Spark基,它是最根本的数据抽象.http://www.cs.berkeley.edu/~matei/papers/2012/nsdi_spark.pdf 它开着RDD文件.假设英语阅读太 ...

  8. 博客测试：博客系统i94web beta1.0 申请测试

    如何做了最近的博客更新,因为已经在线路和代码,我写了一个小博客系统:i94web,草草宣布beta1.0,请求您测试各种漏洞. 先看几张截图. 首页: watermark/2/text/aHR0cDo ...

  9. 关于Promise的一个案例

    题目:红灯三秒亮一次,绿灯一秒亮一次,黄灯2秒亮一次:如何让三个灯不断交替重复亮灯?(用Promise实现) 解答思路一: function red(){ console.log('red'); } ...

  10. java_log4j----java 日志管理

    log4j 有三个主要组件: 类别Loggers------消息类型和优先级 附加目的地Appenders-------在哪里报告消息 布局Layouts------控制如何格式化消息 这三个组件共同 ...