日期:2014-05-16  浏览次数:20519 次

自己写的拖动层插件
基于Jquery 功能大体可用但可能有BUG
JScript code

//最大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 =