<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. js 写日期

    <SCRIPT language="JavaScript" type="text/JavaScript">   today = new Date() ...

  2. WPF中当鼠标移到按钮上时，按钮的背景图片消失的问题

    如果给按钮设置了背景图片,当鼠标移到按钮上的时候,按钮就好变成一个浅蓝色的按钮,背景图片就消失了,对于这个问题有很多解决方法,我只分享一下我的解决方法. 我第一次用的方式是在按钮中添加一个图片,不用背 ...

  3. 设置Proxy Server和SQL Server实现互联网上的数据库安全

    ◆首先,我们需要了解一下SQL Server在WinSock上定义协议的步骤: 1. 在”启动”菜单上,指向”程序/Microsoft Proxy Server”,然后点击”Microsoft Man ...

  4. IOS总结 静变量static、全局变量extern、局部变量、实例变量

    1.静态变量 static 什么是静态变量:从面向对象的角度触发,当需要一个数据对象为整类而非某个对象服务,同时有力求不破坏类的封装性,既要求此成员隐藏在类的内部,有要求对外不可见的时候,就可以使用s ...

  5. asp.net遍历页面中所有TextBox，并赋值为String.Empty的方法

    本文介绍下,如何用.net遍历页面中的所有TextBox控件,并赋值为string.empty的方法,通过实例学习具体操作.有需要的朋友可以参考下.   一.遍历窗体控件 1,普通页面遍历TextBo ...

  6. Loader之一：基本原理

    参考APIDEMO及http://developer.android.com/guide/components/loaders.html#app 1.Introduced in Android 3.0 ...

  7. Angular中Controller之间的信息传递（第二种办法）：$emit,$broadcast,$on

    $emit只能向parent controller传递event与data( $emit(name, args) ) $broadcast只能向child controller传递event与data ...

  8. multiprocessing跨平台锁的使用（Windows问题）

    在Windows上可能遇到,开启的子进程不会关闭的问题 参考multiprocessing官方文档: Explicitly pass resources to child processes On U ...

  9. Problem 1008 Hay Points

    Problem Description Each employee of a bureaucracy has a job description - a few paragraphs that des ...

  10. 【测试Json的多空格问题】

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...