<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. 本地无sqlserver服务下操作数据库 之GSQL

    作为程序员无论是我们写的各种MIS系统还是游戏都离不开数据的存取操作,正如我们前几天在VS下做的一MIS系统,现在纠结. 如果是C/S或B/S模型就好了,可是需求不是,没办法,顾客是上帝...他们的需 ...

  2. android——ObjectAnimator动画(一)

    直接贴上集中用法 package com.example.test; import com.example.test.views.CircleView; import android.animatio ...

  3. 使用AsyncTask实现图片加载

    如上图所示:我们看到的就是使用PrograssDialog进度条和AsyncTask异步任务实现的效果(额,不要看应用名...).下面介绍一下具体的实现流程. 一.首先使用XML布局,布局很简单直接上 ...

  4. ASP.NET MVC中移除冗余Response Header

    本文主要介绍如何优化ASP.NET MVC使用IIS时Response Header中的不必要的信息 默认的,创建一个ASP.NET MVC项目,会在Response Header中包含一些敏感的信息 ...

  5. IE10以下placeholder不兼容

    做页面的时候在谷歌中是显示的,但是换了IE之后总是不显示,一个文本框还好,如果有多个的话,如图: 添加以下一段Jquery代码: <script> var JPlaceHolder = { ...

  6. HTML5的结构学习(2) --- 新增的非主体结构元素

    除了上一篇学习到的主体结构元素之外,html5还增加了一些表示逻辑结构和附加信息的非主体结构元素: 1.header 解释:一种具有引导和导航作用的结构元素. 用途:通常用来放置整个页面或者页面内某一 ...

  7. win32 清空ListBox所有内容

    Q:clear listbox hi i am working in VC++ 6 using Win32 App. .............tell me how to clear the lis ...

  8. 痛苦的版本对齐(3) cygwin下的路径引用

    [续<痛苦的版本对齐(2) 和时间的相关性>]http://www.cnblogs.com/yvivid/p/3541142.html 初步定位,如下告警为.depend文件路径问题导致. ...

  9. Gartner Publishes 2014 Magic Quadrant for SIEM and Critical Capabilities for SIEM Reports

    http://securityintelligence.com/gartner-2014-magic-quadrant-siem-security/#.SzNnhshk https://www.net ...

  10. 四种常见的 POST 提交数据方式--good

    HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 POST 一般用来向服务端提交数据,本文 ...