<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. Android日志收集功能设计和实施报告（总）

    几乎所有的应用程序开发者都知道"用户体验"重视,为了增强用户体验是从全面的监测和报告制度密不可分,在这些日志(控制Crash报告)是主要的问题跟踪和解决工具. 日志上报系统.首先看 ...

  2. Spring先进的交易管理困难剖析

    1Spring事务传播行为 所谓事务传播行为就是多个事务方法相互调用时,事务怎样在这些方法间传播.Spring支持7种事务传播行为 PROPAGATION_REQUIRED(增加已有事务) 假设当前没 ...

  3. [Unity3D]Unity3D圣骑士当游戏开发商遭遇Mecanim动画系统

            大家好.我是秦培.欢迎关注我的博客.我的博客地址blog.csdn.net/qinyuanpei. 博主总算赶在这个月底写出了这篇文章.这个月由于期末考试一直没时间研究太多关于技术方面 ...

  4. （大数据工程师学习路径）第四步 SQL基础课程----修改和删除

    一.准备 在正式开始本内容之前,需要先从github下载相关代码.该代码可以新建两个数据库,分别名为test_01和mysql_shiyan ,并在mysql_shiyan数据库中建4个表(depar ...

  5. js面向对象的学习笔记九(BOM 与 DOM 经常使用的属性分析)

    一  BOM物 window 的 相关属性 1. 用户配置的机器配置对象 navigator navigator.userAgent //该属性能够查看用户机器浏览器的配置 "Mozilla ...

  6. C# Windows Schedule task此次收购task下一步执行时间

    最近进行了一次需求和Windows Schedule task相关职能,通过schedule,计算下一次运行task时间. 它用于由第三方DLL实现,以下网站,以下载来自: http://tasksc ...

  7. BestCoder-Round#33

    写在前面 这是我第一次做BestCoder, 熟悉的外观BestCoder模式. BC上不仅能看到英文, 背部Chinese view是中文题目 交的次数是会影响得分的. 所以有了把握再交. 至少例子 ...

  8. XML概要

     早在两年前,我一直听说XML,但是,只是没有时间去研究它.也不知道它的作用,花了一些时间最近几天来学习他们的语言.是XML的一些简介希望能对各位同学有所帮助: XML是eXtensible Ma ...

  9. [转]HttpClient使用详解

    Http协议的重要性相信不用我多说了,HttpClient相比传统JDK自带的URLConnection,增加了易用性和灵活性(具体区别,日后我们再讨论),它不仅是客户端发送Http请求变得容易,而且 ...

  10. hdu Text Reverse

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1062 单词翻转! 代码: #include <stdio.h> #include < ...