<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. C/C++ 笔试、面试题目大汇总 转

    C/C++ 笔试.面试题目大汇总 这些东西有点烦,有点无聊.如果要去C++面试就看看吧.几年前网上搜索的.刚才看到,就整理一下,里面有些被我改了,感觉之前说的不对或不完善. 1.求下面函数的返回值( ...

  2. zepto的touch.js左右滑动存在一些问题，用百度的touch.js代替

    这几天用zepto想写一个移动端的活动,在实现左右滑动触发动画时,发现zepto的touch.js在ios的微信上有问题. 问题描述:左右滑动时如果手指没有一直跟频幕贴着(在手机上滑动时,如果手指不是 ...

  3. SFTP CONFIGURATION IN FLASHFXP PROGRAM

    This is a brief guide on how to configure the FlashFXP FTP client to log on to the domain web space ...

  4. 几个因为hadoop配置文件不当造成的错误

    192.168.1.20: Exception in thread "main" java.lang.IllegalArgumentException 192.168.1.20: ...

  5. JavaScript模块化开发&&模块规范

    在做项目的过程中通常会有一些可复用的通用性功能,之前的做法是把这个功能抽取出来独立为一个函数统一放到commonFunctions.js里面(捂脸),实现类似于snippets的代码片段收集. fun ...

  6. Loader之二：CursorLoader基本实例

    参考APIDEMO:sdk\samples\android-19\content\LoaderCursor 1.创建主布局文件,里面只包含一个Fragment. <FrameLayout xml ...

  7. %hd %d %ld %u ......

    %d 有符号10进制整数 %ld 长整型 %hd短整型%md,m指定的是输出字段的宽度,默认左补空格, 如果数据的位数小于m,则左端补以空格,若大于m,则 按实际位数输出,如: printf(&quo ...

  8. 变态最大值--nyoj题目811

    变态最大值 时间限制:1000 ms  |  内存限制:65535 KB 难度:1   描述 Yougth讲课的时候考察了一下求三个数最大值这个问题,没想到大家掌握的这么烂,幸好在他的帮助下大家算是解 ...

  9. JQuery 的基本命令

    调用jquery的格式 <script>   $(document).ready(function() {     }); </script>   笔记 1.现在让我们开始写第 ...

  10. USB HID复合设备实例—键盘+鼠标

    实现这种USB HID复合设备有两种方法,在<USB HID协议入门>一节已经讲到其中一种方法,说一个USB HID设备可以包含多种功能的报告描述符合集,这样可以实现复合设备,如带鼠标功能 ...