自己写的拖动层插件

基于Jquery 功能大体可用但可能有BUG//最大z-index
var maxZ_index = 0;
//是否启用onDrag回调函数
var isOnDrag = false;
//onDrag回调函数
var onDragFn = {};
//是否启用拖动时的回调函数
var isMove = false;
//onMove回调函数
var onMoveFn = {};
jQuery.fn.extend(
{
    Drag: function(DragId) {
        //鼠标是否按下
        var isdown = false;
        //鼠标位置对象
        var MousePosition = {};
        //鼠标位置心对象
        var NewMousePosition = {};
        //拖动此obj有用
        var obj = {};
        //可移动最大div
        var fObj = $(this);
        
        //判断是否传入DragId
        if (DragId == undefined) {
            obj = $(this);
        } else {
            obj = $("#" + DragId);
        };
        
        $(document).mousemove(function(e) {
            if (isdown) {
                NewMousePosition = $.getMousePosition(e);
                var left = fObj.css("left");
                if (left == "auto") {
                    left = 0;
                } else {
                    left = left.replace("px", "");
                };
                var top = fObj.css("top").replace("px", "");
                if (top == "auto") {
                    top = 0;
                } else {
                    top.replace("px", "");
                };
                fObj.css("left", (Number(left) + NewMousePosition.l - MousePosition.l) + "px");
                fObj.css("top", (Number(top) + NewMousePosition.t - MousePosition.t) + "px");
                MousePosition = NewMousePosition;
                if(isMove){
                    onMoveFn(left,top,NewMousePosition,fObj);
                };
            };
        });
        
        obj.mousedown(function(e) {
            isdown = true;
            MousePosition = $.getMousePosition(e);
            //设置maxZ_index
            if(fObj.css("z-index") <= maxZ_index){
                maxZ_index++;
                fObj.css("z-index",maxZ_index);
            };
            //设置层的浮动
            fObj.css("position", "absolute");
            //给层定位到层的原有位置
            if(fObj.css("left")=="auto"){
                fObj.css("left",fObj.attr("offsetLeft"));
            };
            if(fObj.css("top")){
                fObj.css("top",fObj.attr("offsetTop"));
            };
            fObj.css("filter","Alpha(opacity=50)");
            fObj.css("opacity","0.5");
            if(fObj.css("background-color") == "transparent"){
                fObj.css("background-color","White");
            };
        }).mouseup(function() {
            isdown = false;
            if(isOnDrag){
                onDragFn(fObj.css("left").replace("px", ""),fObj.css("top").replace("px", ""),fObj);
            }
            fObj.css("filter","");
            fObj.css("opacity","");
        }).css("cursor", "move");//设置鼠标手势
        //设置z-index
        if(fObj.css("z-index") == "auto"){
            fObj.css("z-index","1");
        };
        if(fObj.css("z-index") > maxZ_index){
            maxZ_index = fObj.css("z-index");
        };
        if(fObj.html().replace(/(^\s*)|(\s*$)/g, "") == ""){
            fObj.html("&nbsp;");
        };
    },
    onDrag:function(fn){
        onDragFn = fn;
        isOnDrag = true;
    },
    onMove:function(fn){
        onMoveFn = fn;
        isMove = true;
    }
});
$.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 { l: posx, t: posy };
    }
});使用方式<!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="js/jquery-1.4.2.min.js" type="text/javascript"></script>    <script src="js/Drag.js" type="text/javascript"></script></head>
<body onselectstart="return false">
    <div id="bbbbb" style="width:100px;height:200px;border:solid 1px red;"></div>
    <div>
        当前坐标:<input id="txtXY" type="text" value="未赋值" style="width:300px;" /><br />
        最终坐标:<input id="txtXY2" type="text"  value="未赋值" />
    </div>    <div id="div1" style="width: 100px; border: solid 1px red; height: 100px;">
        <div id="div2" style="width: 100px; border-bottom: solid 1px red">
            拖这里
        </div>
        <div>
            实例2
        </div>
    </div>
    <script type="text/javascript">
        var ise = false;
        $(document).ready(function(){
            //注册拖动
            $("#div1").Drag("div2");
            //拖动时的回调函数
            $("#div1").onMove(a);
            //拖动完毕后的回调函数
            $("#div1").onDrag(b);
        });
        function a(x,y,obj){
            $("#txtXY").val(x+"|"+y+" 鼠标位置:"+obj.l+"|"+obj.t);
            if(isEnter("bbbbb",obj.l,obj.t)){
                $("#bbbbb").css("background-color","red");
                ise = true;
            }else{
                $("#bbbbb").css("background-color","transparent");
                ise = false;
            }
        };
        function b(x,y,fObj){
            if(ise){
                fObj.css("position", "");
                fObj.css("left","");
                fObj.css("top","");
                $("#bbbbb").append(fObj);
            }
            $("#txtXY2").val(x+"|"+y);
        };
        
        function isEnter(objId,mouseX,mouseY){
            var obj = $("#"+objId);
            var minX = obj.attr("offsetLeft");
            var maxX = obj.attr("offsetLeft")+obj.attr("offsetWidth");
            var minY = obj.attr("offsetTop");
            var maxY = obj.attr("offsetTop")+obj.attr("offsetHeight");
            if(mouseX > minX && mouseX < maxX && mouseY > minY && mouseY < maxY){
                return true;
            }
            return false;
        };
    </script></body>
</html>

解决方案 »

  1.   

    BUG是当注册多个拖动层时 onDrag onMove 2个回调函数无法分开 
    例如$("#div1").Drag();
    $("#div2").Drag();
    //拖动完毕时
    $("#div1").onDrag(function (x,y,obj){
        alert("div1拖动完毕");
    });
    $("#div2").onDrag(function (x,y,obj){
        alert("div2拖动完毕");
    });但最终结果是 不管拖动 div1 还是 div2 当拖动完毕时都 alert("div2拖动完毕");
    我知道原因是 这个onDragFn全局变量 存放 传入的回调函数 给他赋了两遍值 
    但我不知道怎么把 onDragFn 弄成私有的变量 如果弄成私有的就完美了