<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>jQuery拖动层</title>

<style type="text/css">

#div2

{

    position:absolute;

    width:400px;

    height:300px;

    border:1px solid #333333;

    background-color:#777788;

    text-align:center;

    line-height:400%;

    font-size:13px;

    left:80px;

    top:20px;

}

</style>

<script type="text/javascript" language="javascript" src="/ajaxjs/jquery-1.4.1.js"></script>

<script type="text/javascript" language="javascript">

    var _move = false; //移动标记

    var _x, _y; //鼠标离控件左上角的相对位置

    $(document).ready(function () {

        $("#div2").click(function () {

            //alert("click");//点击（松开后触发）

        }).mousedown(function (e) {

            _move = true;

            _x = e.pageX - parseInt($("#div2").css("left"));

            _y = e.pageY - parseInt($("#div2").css("top"));

            $("#div2").fadeTo(20, 0.25); //点击后开始拖动并透明显示

        });

        $(document).mousemove(function (e) {

            if (_move) {

                var x = e.pageX - _x; //移动时根据鼠标位置计算控件左上角的绝对位置

                var y = e.pageY - _y;

                $("#div2").css({ top: y, left: x }); //控件新位置

            }

        }).mouseup(function () {

            _move = false;

            $("#div2").fadeTo("fast", 1); //松开鼠标后停止移动并恢复成不透明

        });

    });

</script>

</head>

<body>

    <div id="div2">支持拖拽</div>

</body>

</html>

JQuery 拖动层的更多相关文章

  1. Jquery 实现层的拖动，支持回调函数

    最近在写一个CMS内容管理系统,前台基本是用ajax异步请求服务器,通过ashx处理,返回json格式处理.由于需要更加人性化的界面,所以采用到了拖动层的操作. 以下是拖动层的主要核心方法,本来想写成 ...

  2. jQuery拖动剪裁图片作为头像

    图片上传是许多网站的一个常用的功能,有时需要对上传的图片做初步的选择裁剪,比如上传头像.下面就是一个使用HTML5+jQuery实现的图片上传裁剪特效,可以对选择要上传的图片做缩小.放大.拖动和裁剪, ...

  3. h5滑动方向、手机拖动层

    做h5时需对手指滑动方向判断及拖动浮动层,本文代码适用于手机端h5页面,pc页面可使用onMouseDown.onMouseUp.onMouseMove.(本方法仅为功能实现原理和演示,可根据自己的需 ...

  4. js拖动层

    模仿网易彩票网(http://caipiao.163.com/)的登陆框自己做了一个拖动层,不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态(cursor:text;) <!DOCT ...

  5. 在chrome下鼠标拖动层变文本形状的问题

    学JQ也有一段时间了,想自己写个鼠标拖动层移动的效果(很简单,只是为了练习而已)于是就写下了下面的代码 <!DOCTYPE html> <html> <head> ...

  6. JQuery浮动层Loading页面加载特效

    之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...

  7. jQuery制作div板块拖动层排序

    html结构: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  8. jQuery遮罩层登录对话框

    用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...

  9. jquery 遮罩层显示img

    如果点击iframe中的image显示整个页面的遮罩层,可参考如下: http://blog.csdn.net/shiaijuan1/article/details/70160714 具体思路就是,顶 ...

随机推荐

  1. android stagefright awesomeplayer 分析

    主要调用awesomeplay.cpp的函数来实现音视频等功能,可以说是对awesomeplay.cpp的封装,进一步抽象,然后提供给上层调用,主要的调用者是MediaPlayerService.cp ...

  2. ueditor+asp.net异步提交，可以实现了，嘿嘿

    之前没用过Ueditor去异步提交,最近项目需要用到这个,就下了个来用,结果可能没仔细去看Ueditor的相关介绍文档,然后自己也郁闷了一下才把它弄出来,现在可以实现异步提交了,松口气,把代码贴出来, ...

  3. SQL Server 性能小点

    1. 对索引列使用Like语句, 如果是"Like 'aa%'"则使用索引优化, 若是"Like '%aa'"则不使用索引优化. 2. "[Age] ...

  4. C# 关于out关键字的用法（一个方法返回多个值的问题）

    通常一个方法只能返回一个值,但是如果在某些时候,我们想要返回多个值,例如某个方法将一个浮点数分割成一个整数和一个小数返回去.这个时候我们就要用到out关键字. 如果用ref也可以解决,但是用ref需要 ...

  5. Javascript进阶篇——(流程控制语句)笔记整理

    做判断(if语句)if语句是基于条件成立才执行相应代码时使用的语句.语法: if(条件){ 条件成立时执行代码 } 例子:假设你应聘web前端技术开发岗位,如果你会HTML技术,你面试成功,欢迎加入公 ...

  6. JQ 复制节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Android之日期及时间选择对话框

    转:http://www.cnblogs.com/linjiqin/archive/2011/03/10/1980215.html main.xml布局文件 <?xml version=&quo ...

  8. jquery操作session的方法

    jquery.session.js使用  //此方法在java中不能使用 // jquery.session.js 简单使用方法 添加数据    $.session.set('key', 'value ...

  9. select语句后面加上for update的作用

    Select…For Update语句的语法与select语句相同,只是在select语句的后面加FOR UPDATE [NOWAIT]子句. 该语句用来锁定特定的行(如果有where子句,就是满足w ...

  10. 【搜索引擎Jediael开发笔记2】使用HttpClient下载网页至本地文件

    本文使用HttpClient根据url进行网页下载.其中 (1)HttpClient的相关知识请参见HttpClient基础教程 (2) package org.ljh.search.download ...