jquery实现很简单的DIV拖动

浏览数：24 / 时间：2015年06月09日

今天用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