jquery 拖动DIV

时间：2022-08-31 19:44:10

<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. PHP读写文件高并发处理实例-转

    背景: 最近公司游戏开发需要知道游戏加载的流失率.因为,我们做的是网页游戏.玩过网页游戏的人都知道,进入游戏前要加载一些资源.最后才能到达创建角色的游戏界面.我们有一个需求就是要统计在加载过程中还未到 ...

  2. （传智博客）tp开发第一天之tp执行流程分析笔记

    1.入口文件index.php 2.ThinkPHP/ThinkPHP.php require THINK_PATH.'Common/runtime.php'; 3.ThinkPHP/Common/r ...

  3. &period;NET 条件查询实现--类似网上商城宝贝搜索

    需要实现的效果:点击表格列头:弹出一个层,用户可以输入当前列头的查询条件,点击确定之后,把该列头的查询信息显示在页面顶部,用户可以叉掉这个查询条件,恢复到查询之前的数据. 大致实现的效果图: 项目背景 ...

  4. ioc构架demo

    1.视图 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:too ...

  5. DCOS实践分享&lpar;6&rpar;：基于DCOS的大数据应用分享

    Open DC/OS大中华区官方发布会在京隆重召开   DCOS领域诞生了一个100%开源的企业级Datacenter Operating System版本,即DC/OS.Linker Network ...

  6. C&num;设计模式（6）——原型模式

    1.原型模式介绍 在软件系统开发中,有时候会遇到这样的情况:我们需要用到多个相同实例,最简单直接的方法是通过多次调用new方法来创建相同的实例.如下: Person person=}; Person ...

  7. noip2013转圈游戏

    题目描述 n个小伙伴(编号从 0到 n−1)围坐一圈玩游戏.按照顺时针方向给 n个位置编号,从0 到 n−1.最初,第 0号小伙伴在第 0号位置,第 1号小伙伴在第 1 号位置,……,依此类推. 游戏 ...

  8. 3D物体识别的如果检验

    3D物体识别的如果验证 这次目的在于解释怎样做3D物体识别通过验证模型如果在聚类里面.在描写叙述器匹配后,这次我们将执行某个相关组算法在PCL里面为了聚类点对点相关性的集合,决定如果物体在场景里面的实 ...

  9. Access denied for user &&num;39&semi;root&&num;39&semi;&commat;&&num;39&semi;localhost&&num;39&semi; &lpar;using password&colon;YES&rpar;解决方法

    Access denied for user 'root'@'localhost' (using password:YES)解决方法 在MySQL的使用过程中,我们可能会碰到“Access denie ...

  10. 【Set jsonObj &equals; toJson&lpar; jsonString &rpar;】创建JSON实例

    创建JSON实例: 原型: toJson( jsonString ) 说明: 创建JSON实例 返回: [JSON] 参数: jsonString [可选] 可以用json格式字符串创建实例 示例: ...

相关文章