最新拖动层插件希望大家帮忙测试下

Question

文件名：Drag.js//最大z-index
var maxZ_index = 0;jQuery.fn.extend(
{
    //ParameterS格式：{ DragId: "divid", onMouseUpFn: function() { }, onDragFn: function() { } };
    Drag: function(ParameterS) {
        //鼠标是否按下
        var isdown = false;
        //可拖动的DIV对象
        var obj;
        //最大可移动DIV
        var maxObj = $(this);
        //鼠标按下时鼠标坐标对象
        var MousePosition;
        //鼠标弹起时鼠标坐标对象
        var NewMousePosition;
        if (ParameterS == undefined) {
            obj = $(this);
        } else {
            if (ParameterS.DragId == undefined) {
                obj = $(this);
            } else {
                obj = $("#" + ParameterS.DragId);
            }
        }        //鼠标拖动时
        obj.mousedown(function(e) {
            isdown = true;
            MousePosition = $.getMousePosition(e);
            //设置maxZ_index
            if (maxObj.css("z-index") <= maxZ_index) {
                maxZ_index++;
                maxObj.css("z-index", maxZ_index);
            };
            //设置层的浮动
            maxObj.css("position", "absolute");
            //给层定位到层的原有位置
            if (maxObj.css("left") == "auto") {
                maxObj.css("left", maxObj.attr("offsetLeft"));
            };
            if (maxObj.css("top")) {
                maxObj.css("top", maxObj.attr("offsetTop"));
            };
            maxObj.css("filter", "Alpha(opacity=50)");
            maxObj.css("opacity", "0.5");
            if (maxObj.css("background-color") == "transparent") {
                maxObj.css("background-color", "White");
            };
        }).mouseup(function() {//鼠标弹起
            isdown = false;
            maxObj.css("filter", "");
            maxObj.css("opacity", "");
            if (ParameterS != undefined) {
                if (ParameterS.onMouseUpFn != undefined) {
                    var returnVal = { DragObj: maxObj, MouseObj: NewMousePosition };
                    ParameterS.onMouseUpFn(returnVal);
                }
            };
        }).css("cursor", "move"); //设置鼠标手势
        //设置z-index
        if (maxObj.css("z-index") == "auto") {
            maxObj.css("z-index", "1");
        };
        if (maxObj.css("z-index") > maxZ_index) {
            maxZ_index = maxObj.css("z-index");
        };
        if (maxObj.html().replace(/(^\s*)|(\s*$)/g, "") == "") {
            maxObj.html("&nbsp;");
        };
        //鼠标拖动时
        $(document).mousemove(function(e) {
            if (isdown) {
                NewMousePosition = $.getMousePosition(e);
                $.divLocate(maxObj.attr("id"), MousePosition, NewMousePosition);
                MousePosition = NewMousePosition;
                if (ParameterS != undefined) {
                    if (ParameterS.onDragFn != undefined) {
                        var returnVal = { DragObj: maxObj, MouseObj: NewMousePosition };
                        ParameterS.onDragFn(returnVal);
                    }
                }
            }
        });
    }
});
$.extend({
    //获得鼠标坐标
    getMousePosition: function(e) {
        var posX = 0;
        var posY = 0;
        if (!e) var e = window.event;        if (e.pageX || e.pageY) {
            posX = e.pageX;
            posY = e.pageY;
        }
        else if (e.clientX || e.clientY) {
            posX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            posY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        };
        return { MouseX: posX, MouseY: posY };
    },
    //给DIV定位
    divLocate: function(divId, MousePosition, NewMousePosition) {
        var divObj = document.getElementById(divId);
        var left = divObj.style.left;
        if (left == "auto") {
            left = 0;
        } else {
            left = left.replace("px", "");
        }
        var top = divObj.style.top;
        if (top == "auto") {
            top = 0;
        } else {
            top = top.replace("px", "");
        }
        divObj.style.left = (Number(left) + NewMousePosition.MouseX - MousePosition.MouseX) + "px";
        divObj.style.top = (Number(top) + NewMousePosition.MouseY - MousePosition.MouseY) + "px";
    }
});
在给一个HTML实例<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>    <script src="javascript/jquery-1.4.min.js" type="text/javascript"></script>    <script src="javascript/Drag.js" type="text/javascript"></script></head>
<body>
    鼠标位置：<input id="FinalTxt" type="text" /><br />
    <div id="putong" style="width: 200px; height: 200px; border: solid 1px red">
        普通拖动
    </div><br />
    <div id="quyu" style="width: 200px; height: 200px; border: solid 1px red">
        <div id="tuowo" style="width: 200px; height: 30px; margin: 0;border-bottom:solid 1px red">
            拖我
        </div>
        指定拖动区域
    </div><br />
    <div id="CallbackDiv" style="width: 200px; height: 200px; border: solid 1px red">
        <div id="CallbackTuowo" style="width: 200px; height: 30px; margin: 0;border-bottom:solid 1px red">拖我</div>
        回调函数的使用
    </div>
    <script type="text/javascript">
        //普通拖动
        $("#putong").Drag();
        
        //指定拖动区域
        $("#quyu").Drag({
            DragId:"tuowo"
        });
        
        //使用回调函数
        //onMouseUpFn 鼠标弹起时的回调函数
        //onDragFn 拖动时的回调函数
        $("#CallbackDiv").Drag({
            DragId:"CallbackTuowo",
            onDragFn:function(data){
                //data的使用方式和onMouseUpFn一样
            },
            onMouseUpFn:function(data){
                //data是一个对象 包含当前拖动层的jquery对象“DragObj” ，鼠标实时坐标对象：MouseObj 使用如下
                
                //鼠标弹起时 弹出当前被拖动 DIV 的 ID
                alert(data.DragObj.attr("id")); 
                
                //显示鼠标最终位置
                $("#FinalTxt").val(data.MouseObj.MouseX + " | " + data.MouseObj.MouseY);
            }
        });
    </script></body>
</html>