<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. linux查看用户登录信息-w命令

    NAME w - Show who is logged on and what they are doing. SYNOPSIS w - [husfV] [user] DESCRIPTION w di ...

  2. oracle ORA_ROWSCN 行记录的更新时间

    在这介绍两个oracle 10G开始提供的一个伪列ORA_ROWSCN,它又分为两种模式一种是基于block,这是默认的模式,还有一种是基于row上,这种模式只能在建里表时指定ROWDEPENDENC ...

  3. 使用SOAPUI测试WEBAPI接口

    其实很简单,用起来也挺方便的. 首先,先去百度下SoapUI 下载,下载安装好后,打开软件. 1.新建一个项目 点击 Create Empty Project 按钮后,会自动新建一个项目,名字默认为: ...

  4. js IP 正则表达式

    //^((25[0-5]|2[0-4]\d|[01]?\d\d?)($|(?!\.$)\.)){4}$//((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\ ...

  5. 在EasyUI中统一判断是否有选中行，如果有则将选中行数据传入回调函数

    function procossWithSeletedData(func) { var rowData = $("#tbGrid").datagrid("getSelec ...

  6. Oracle数据库游标的类型

    游标是SQL的一个内存工作区,由系统或用户以变量的形式定义.游标的作用就是用于临时存储从数据库中提取的数据块.Oracle数据库的Cursor类型包含三种: 静态游标:分为显式(explicit)游标 ...

  7. bootstrap之 Badge 角标

    添加 .am-badge class 到 <div> 或者 <span> 元素. 默认样式     <span class="am-badge"> ...

  8. go import

    import "fmt"最常用的一种形式 import "./test"导入同一目录下test包中的内容 import f "fmt"导入f ...

  9. js中邦定事件与解绑支持匿名函数

    和一个朋友讨论了一下,DOM2绑定方式都是有名的函数,匿名的处理起来有些麻烦,而且即使是有名的函数,在IE低版本的浏览器也是解除不掉的,this指向需要修改,着实费了一番功夫,这个是兼容ie低版本的, ...

  10. 层次节点——NODE节点

    1.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...