今天用jquery实现了一个很简单的拖动...实现思路很简单  如下:

在thickbox 弹出层内实现拖拽DIV,那么得进行一下相对宽高的运算:必须加上相对于可见窗口宽高和弹出层宽高之间的差:
                var x = event.clientX - (document.documentElement.clientWidth - 620) / 2 - event.offsetX;
                var y = event.clientY - (document.documentElement.clientHeight - 465) / 2 - event.offsetY;
                $(".pdivt .divnei").css("left", x);
                $(".pdivt .divnei").css("top", y);

event.offsetX   eventoffsetY 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。

event.clientX  获取鼠标的水平位置

event.clientY  获取鼠标的垂直位置

ousedown事件在鼠标在元素上点击后会触发mousemove 事件通过鼠标在元素上移动来触发mouseout事件在鼠标从元素上离开后会触发<style>
    #Drigging
    {
        width:200px;
        background:#CCC;
        border:solid 1px #666;
        height:80px;
        line-height:80px;
        text-align:center;
        position:absolute;
    }
</style>
<script src="../js/jquery-1.3.1.js"></script>
<script type="text/javascript">
    $(function(){
var bool=false;
var offsetX=0;
var offsetY=0;
        $("#Drigging").mousedown(function(){
            bool=true;
             offsetX = event.offsetX;
            offsetY = event.offsetY;
            $(this).css('cursor','move');
                                        })
        .mouseup(function(){
            bool=false;
                          })
        $(document).mousemove(function(e){
if(!bool)
return;
var x = event.clientX-offsetX;
var y = event.clientY-offsetY;
            $("#Drigging").css("left", x);
            $("#Drigging").css("top", y);

})
               })
</script> offsetParent:http://www.cnblogs.com/jilleanwong/archive/2008/09/21/1295415.htmloffsetLeft、offsetTop、offsetWidth、offsetHeight属性http://www.cnblogs.com/jilleanwong/archive/2008/09/22/1295783.html

jquery实现很简单的DIV拖动的更多相关文章

  1. jquery之超简单的div显示和隐藏特效demo

    闲着无聊,看到某视频网站上讲的DIV显示和隐藏的效果,自己也写了一个. 觉得还是挺简单的. 前端改变世界!嘿嘿,还挺有成就感 <!DOCTYPE html PUBLIC "-//W3C ...

  2. js实现一个可以兼容PC端和移动端的div拖动效果

    前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...

  3. jquery div拖动效果示例代码

    div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...

  4. 一个很简单的jQuery插件实例教程(菜鸟级)

    很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效 ...

  5. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

  6. 探讨把一个元素从它所在的div 拖动到另一个div内的实现方法

    故事背景: 接到一个新需求,要求用vue搞,主要是拖动实现布局,关键点有:单个组件拖动,一行多列里面的组件拖动,  单个组件可以拖入一行多列里, 单个组件的拖动好实现,关键是把一个组件拖动到另一个类似 ...

  7. JQuery asp.net 简单入门

    1.A标签 <a href="javascript:setURL('Invelogin.aspx');">Login.aspx</a> <a href ...

  8. asp.net MVC3 + JQuery 的ajax简单使用

    一直都没有使用过JQuery,更没使用过JQuery的ajax支持带来的方便,今天试了一下,真是减少了很多工作量,使用方法也比较简单 这里先记下来,以后使用时可以再拿着用. 本应用中,本来是准备使用长 ...

  9. jquery编写的简单日历

    以前在开发web页面的时候遇到日历,都是直接引入一些日历组件来用,一直不太明白实现原理,总感觉挺复杂的. 今天尝试着用jquery写了一个简单的日历功能,可以选择年份,月份,返回今天,原来简单的日历功 ...

随机推荐

  1. Codeforces Round #205 (Div. 2) : C

    感觉像是一个数位dp,高位的1如果不选的话,前面低位的数都可以选:不然只能选择为1的数: 代码: #include<iostream> #include<algorithm> ...

  2. 在python中使用zookeeper管理你的应用集群

    http://www.zlovezl.cn/articles/40/ 简介: Zookeeper 分布式服务框架是 Apache Hadoop 的一个子项目,它主要是用来解决分布式应用中经常遇到的一些 ...

  3. 在XP系统中自带的 msvcrt.dll 和 Vista 中的 msvcrt.dll 版本不同,导致抛出的异常不同

    然而,在XP系统中,系统自带的 msvcrt.dll 和 Vista 中的 msvcrt.dll 版本不同, 并没有这个 _except_handler4_common ,结果就出现了启动程序时,遇到 ...

  4. 在 ActionBar 添加刷新按钮

    在以前版本的 Gmail 应用中,ActionBar 上有个刷新菜单,点击一下刷新菜单变成一个转圈的刷新标示动画图片. 之前实现该功能的时候都是使用一个类库 RefreshActionItem来实现的 ...

  5. 【HDOJ】3205 Factorization

    题意很简单.就是求x^k-1的因式分解.显然x-1必然是其中之一(x=1, x^k-1=0).假设k=mp. 则x^k = (x^p)^m, 同理x^p-1必然是其中之一,即x^p的所有因式一定是x^ ...

  6. WordPress Xhanch - My Twitter插件跨站请求伪造漏洞(CVE-2013-3253)

    漏洞版本: WordPress Xhanch - My Twitter Plugin 2.7.5 漏洞描述: Bugtraq ID:61629 CVE ID:CVE-2013-3253 WordPre ...

  7. 【转】iOS 开发怎么入门?

    原文网址:http://www.zhihu.com/question/20264108 iOS 开发怎么入门? 请问有设计模式.内存管理方面的资料吗?最好有除了官方文档之外的其它内容,10 条评论 分 ...

  8. app.config应该放哪?

    一:做了一个简单的三层构架的小例子,在主项目里调用工具类的方法实现在数据库里添加一条信息.先看下错误的提示信息是什么样的,如下图一,图二是调用工具类.直接在工具类里写上连接字符串就没问题,如果写到ap ...

  9. 神器 Sublime Text 3 的一些常用插件

    ConvertToUTF8 支持UTF-8编码的插件 Bracket Highlighter 用于匹配括号,引号和html标签.对于很长的代码很有用.安装好之后,不需要设置插件会自动生效 DocBlo ...

  10. JavaScript高级程序设计15.pdf

    组合继承的问题是会调用2次超类型构造函数 寄生组合式继承 即通过借用构造函数来继承属性,通过原型链的形式来继承方法,思路:不必为了指定子类型的原型而调用超类型的原型,我们所需要的无非是超类型原型的一个 ...