今天用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) : D

    思维题,感叹自己的智商不够啊. 思路大概是这样的: 1.排在队伍前面的女生是不用换位置的: 2.女生在队伍中的顺序是不会变的: 3.最后一个女生稳定了则程序结束: 4.每个女生都有个初始位置和最终位置 ...

  2. iOS9 App Thinning(应用瘦身)功能介绍

    iOS9 发布后,产生了一个使 App Thinning 无法正常运行的 bug.在iOS9.0.2 版本中,这个 bug 已经被修复,App Thinning 已经可以正常使用.当你从应用商店(Ap ...

  3. Bomb Game

    hdu3622:http://acm.hdu.edu.cn/showproblem.php?pid=3622 题意:你有n次,每次你可以在平面上放置一个点,并且每一次都会有两个位置可以选,每一次只能选 ...

  4. TCP协议的3次握手与4次挥手过程详解

    1.前言 尽管TCP和UDP都使用相同的网络层(IP),TCP却向应用层提供与UDP完全不同的服务.TCP提供一种面向连接的.可靠的字节流服务. 面向连接意味着两个使用TCP的应用(通常是一个客户和一 ...

  5. Qt中连接到同一signal的多个slots的执行顺序问题(4.6以后按连接顺序执行)

    起源 前些天忘记在哪儿讨论过这个问题,今天在csdn又看到有网友问这个问题,而其他网友却无一例外的给出了“无序”这个答案. Manual Qt的问题,当manual中有明确文字说明时,我们应该以Qt的 ...

  6. Java实现字符串反转

    替换原则:index k 的值和 n-k 的值进行交换.(始终记住程序员的n.k都是字符串的实际位置.) 乘除的最基本实现还是来源于移位操作. public String reverse(String ...

  7. linux下USB串口,minicom

    [一].驱动相关说明: 如果直接使用串口线,而没有用到USB转串口设备,就不需要安装驱动. 如果使用了USB转串口,一般情况下也不需要安装驱动了,目前linux系统已经包含了该驱动,可以自动识别,亦可 ...

  8. 从 mian 函数开始一步一步分析 nginx 执行流程(三)

    如不做特殊说明,本博客所使用的 nginx 源码版本是 1.0.14,[] 中是代码所在的文件! 这一节我们分析ngx_start_worker_processes(),该函数代码比较少,因为它通过调 ...

  9. HDOJ 2018 母牛的故事

    Problem Description 有一头母牛,它每年年初生一头小母牛.每头小母牛从第四个年头开始,每年年初也生一头小母牛.请编程实现在第n年的时候,共有多少头母牛? Input 输入数据由多个测 ...

  10. Kong for Enterprise | Kong - Open-Source API and Microservice Management Layer

    Kong for Enterprise | Kong - Open-Source API and Microservice Management Layer undefined