轻量级jQuery拖拽插件和弹窗插件

[5/13更新]
1，增加对bootstrap的支持，（仅仅是用了bootstrap的样式，行为还是由本插件接管）

2，添加了bootstrap的示例页面

现在这种东西网上一抓一大把，而且也都很成熟，自己做一个一是轻量级，完全自定义，二也就一些人问我要一些轻量级插件的时候我推荐给他们用吧，毕竟出了问题我可以直接改，也不需要读别人的代码了，基本需求：

1，拖拽插件
    可对任意元素生效
    允许设置元素能否超出窗体可见范围
    如果不可拖出窗体外，同时可设置元素距离窗体四周的边距（考虑到有些元素有投影等，需要留出边距显示投影）
    允许设置拖拽手柄（必须是该元素DOM树的子级）
2，弹窗插件
    初始设置标题/宽高/遮罩等基本功能
    可设置拖拽窗体位置
    可设置拖拽窗体大小
    支持最大化/还原，支持标题栏双击最大化/还原，与windows使用习惯一致，可禁用最大化
    单页面可无限弹窗
    多个弹窗初始位置会自动层叠，留出每个窗体的标题栏，与windows窗体行为一致
    同个页面多个弹窗之间点击，会自动激活点击的窗体，并将其带到最顶层
    激活的窗体关闭，会自动激活下一个窗体
    支持传入加载html，同域页面，以及跨域页面，加载完成前只有自定义的加载动画

其中，弹窗插件把css留给了外部，可完全自定义，插件内部只保留了部分必要css。窗体的拖动，就顺便用了拖拽插件的实现，不再另合并代码，

开发和测试版本为jQuery1.8.3，并且绑定事件的方法在拖拽插件用的是live/die, 弹窗插件是on/off，总之你用1.7以前，最好是1.8，应该是没有问题的。

拖拽源码：

//----------------------------------------------------------------------------------------------------// [作    者] walkerwang
// [邮    箱] walkerwzy@gmail.com
// [作者博客] http://walkerwang.cnblogs.com
// [更新日期] 2013-3-11
// [版 本 号] ver0.1.0
// [使用说明]
// $(element).dragable(options)
// options.namespace(string):命名空间，有默认值
// options.outer(boolean)：是否允许弹窗超出屏幕范围，默认不允许
// options.offset({left:0,right:0,top:0,bottom:0})：元素与窗体四边的边距，outer=true时才生效
// options.handler(string/dom/jQuery object):拖动手柄，即元素内的某个元素点击才会触发拖动事件，默认为null，支持css选择器、DOM元素，jQuery对象
//=====================================================================================
(function ($) {
    $.fn.dragable = function (conf) {
        var options = $.extend({}, $.fn.dragable.defaults, conf),
el = options.namespace + "_onmove",
        outer = options.namespace + "_outer";
        $(this).each(function (i, m) {
            var t = $(this), o = $(this);
            if (options.handler) o = $(options.handler, this);
            o.die('mousedown').live('mousedown', function (e) {
                t.data('position', { offset: o.offset(), eventx: e.pageX, eventy: e.pageY }).addClass(el);
                if (options.outer) t.addClass(outer);
            }).css('cursor', 'move');;
        });
        $("*").die("mousemove").die("mouseup")
.live('mousemove', function (e) {
    var m = $("." + el);
    if (m.length == 0) return;
    var mdata = m.data('position'), x, y;
    if (m.is('.' + outer)) {
        x = e.pageX - (mdata.eventx - mdata.offset.left);
        y = e.pageY - (mdata.eventy - mdata.offset.top);
    }
    else {
        x = Math.max(0 + (options.offset.left || 0), e.pageX - (mdata.eventx - mdata.offset.left)),
                y = Math.max(0 + (options.offset.top || 0), e.pageY - (mdata.eventy - mdata.offset.top)),
                wx = $(window).width() - m.width() - (options.offset.right || 0),
                wy = $(window).height() - m.height() - (options.offset.bottom || 0);
        if (x > wx) x = wx;
        if (y > wy) y = wy;
    }
    m.css({ position: 'absolute', left: x, top: y, margin: 0 });
})
.live('mouseup', function (e) {
    $("." + el).removeClass(el);
});
    };
    $.fn.dragable.defaults = {
        namespace: "mydragableplug",
        offset: { top: 0, bottom: 0, left: 0, right: 0 },
        handler: null,
        outer: false
    };
})(jQuery);

弹窗源码：

//----------------------------------------------------------------------------------------------------// [作    者] walkerwang// [邮    箱] walkerwzy@gmail.com// [作者博客] http://walkerwang.cnblogs.com// [更新日期] 2013-4-26// [版 本 号] v 0.1.1// [使用方法]// var d=new dialog(options).show();//=====================================================================================var dialog = function (conf) {    var self = this,        defaults = {            namespace: "mydialogplug_",//命名空间、ID前缀            cover: false,//显示遮罩            dragable: true,//可拖拽            resizable: false,//可更改大小            html: '',//加载html字符串            ajax: '',//加载同域页面            iframe: '',//iframe方式加载本域或跨域页面            title: 'Title',//弹窗标题            width: 600,//弹窗宽度            height: 320,//弹窗高度            outer: false,//允许弹窗被拖到窗体可见区域外            dragMargin: {},//如果outer=false，设定弹窗与窗体四周的边距            maximum: true,//允许最大化            loading: ''//加载页面时的提示//可以传入文字，也可以外部用css来定义.dlg-loading的样式        };    //apply options    self.options = $.extend({}, defaults, conf);    self.options.dragMargin.top = self.options.dragMargin.top || 0;    self.options.dragMargin.bottom = self.options.dragMargin.bottom || 0;    self.options.dragMargin.left = self.options.dragMargin.left || 0;    self.options.dragMargin.right = self.options.dragMargin.right || 0;    //variable    var str_dlg = '<div class="dlg-container dlg-zindex">' +        '<div class="dlg-header">' +            '<div class="dlg-op"><span class="dlg-max" style="display:none;"></span><span class="dlg-restore" style="display:none;"></span><span class="dlg-close"></span></div>' +            '<div class="dlg-icon"></div>' +            '<div class="dlg-title"></div>' +        '</div>' +        '<div class="dlg-body"></div>' +        '<div class="dlg-footer"><div class="dlg-resize"></div></div>' +    '</div>',    str_cover = '<div class="dlg-cover dlg-zindex"></div>',    zindex_start = 100000,    maxed = false,    resizeObj = self.options.namespace + "_onresize",    css = {        cover: { height: '100%', width: '100%', opacity: 0.5, backgroundColor: '#fff', position: 'fixed', top: 0, left: 0, display: 'none', zIndex: 99999 },        container: { position: 'absolute', top: '50%', left: '50%' },        close: { cursor: 'pointer' },        body: { backgroundColor: '#fff', overflow: 'hidden' },        loading: {},        resize: { position: 'absolute', right: 0, bottom: 0, width: 15, height: 15, cursor: 'nw-resize' }    },    getActiveDialog = function () {        return $($('.dlg-container').get().sort(function (a, b) { return parseInt($(b).css('z-index'), 10) - parseInt($(a).css('z-index'), 10); })[0]);    },    getMaxZindex = function () {        var exists = $('.dlg-zindex');        if (!exists) return zindex_start;        var ids = exists.map(function () { return parseInt($(this).css('z-index'), 10); }).get();        return Math.max.apply(Math, ids);    },    getStackedMargin = function () {        var exists = $('.dlg-container');        return 24 * exists.length;    },    getDialogBody = function () {        return self.dialog.find('.dlg-body');    },    setDialogCentral = function () {        self.dialog.css({ top: '50%', left: '50%', marginLeft: function () { return 0 - parseInt($(this).width() / 2, 10) + getStackedMargin(); }, marginTop: function () { return 0 - parseInt($(this).height() / 2, 10) + getStackedMargin() - 80; } });    },    setIFrameWH = function () {        var body = getDialogBody();        body.find('iframe').css({ width: body.width(), height: body.height() });    },    showLoading = function () {        getDialogBody().html('<span class="dlg-loading">' + self.options.loading + '</span>');    },    hideLoading = function () {        getDialogBody().find('.dlg-loading').remove();    };    //create cover    self.cover = null;    if (self.options.cover) {        if (!self.cover) {            self.cover = $(str_cover).hide().css(css.cover).css({ zIndex: getMaxZindex() + 1 }).appendTo($('body'));        }    };    //create dialog    self.dialog = $(str_dlg).hide().appendTo($('body'));    self.id = self.options.namespace + $('.dlg-container').length;    self.dialog.attr('id', self.id)        .css({ zIndex: function () { return getMaxZindex() + 1; } })        .find('.dlg-title').text(self.options.title);    self.dialog = $("#" + self.id);    //apply style    self.dialog.css(css.container)        .find('.dlg-close').css(css.close)        .end().find('.dlg-body').css(css.body).css({ width: self.options.width, height: self.options.height })        .end().find('.dlg-resize').css(css.resize)        .end().find('.dlg-loading').css(css.loading)    //attatch event    self.dialog.on('mousedown', function () {        var o = $(this),            thisindexid = parseInt(o.css('z-index'), 10) || zindex_start,            maxid = getMaxZindex();        if (o.is('.dlg-close')) return;        if (thisindexid == maxid) return;        $('.dlg-active').removeClass('dlg-active');        o.addClass('dlg-active').css('zIndex', maxid + 1);    })        .find('.dlg-close').on('click', function () { self.close(); });    if (self.options.maximum) {        self.dialog.find('.dlg-header').on('dblclick', function () {            if (maxed) self.restoreWindow();            else self.maxWindow();        })        .find('.dlg-max').on('click', function () {            self.maxWindow();        })        .css('display', 'inline-block')        .next('.dlg-restore').on('click', function () {            self.restoreWindow();        })    };    $(window).resize(function () {        if (maxed) { maxed = false; self.maxWindow(true); return; }    });    //dragable    if (self.options.dragable) self.dialog.dragable({ handler: '.dlg-header', offset: self.options.dragMargin, outer: self.options.outer });    //resizable    if (self.options.resizable) {        self.dialog.find('.dlg-resize')        .off('mousedown').on('mousedown', function (e) {            var body = getDialogBody();            $("." + resizeObj).removeClass(resizeObj);            $(this).data({                startx: e.pageX,                starty: e.pageY,                width: body.width(),                height: body.height()            }).addClass(resizeObj);        });        $('*').off('mousemove').off('mouseup')        .on('mousemove', function (e) {            var o = $('.' + resizeObj);            if (o.length == 0) return;            var x = e.pageX - parseInt(o.data('startx'), 10),            y = e.pageY - parseInt(o.data('starty'), 10),            body = o.parents('.dlg-container').eq(0).find('.dlg-body').eq(0);            body.css({                width: function () { return parseInt(o.data('width'), 10) + x; },                height: function () { return parseInt(o.data('height'), 10) + y; }            });            setIFrameWH();        })        .on('mouseup', function () {            $('.' + resizeObj).removeClass(resizeObj);        });    } else {        self.dialog.find('.dlg-resize').css({ cursor: 'default', backgroundImage: 'none' });    };    //methods    //load contents and show dialog    self.show = function () {        var body = getDialogBody();        if (self.options.html) {            body.html(self.options.html);        } else if (self.options.ajax) {            showLoading();            body.load('page1.html', function () { hideLoading(); });        } else if (self.options.iframe) {            showLoading();            var iframe = $('<iframe/>', { width: body.width(), height: body.height(), src: self.options.iframe }).css({ border: 'none', opacity: 0 })            .appendTo(body)            .load(function () { hideLoading(); iframe.animate({ opacity: 1 }) });        } else body.html('content here');        //position                  setDialogCentral();        //set active        $(".dlg-active").removeClass('dlg-active');        self.dialog.addClass('dlg-active').show();        if (self.options.cover) self.cover.show();        return self;    };    //close the dialog    self.close = function () {        if (self.cover) self.cover.remove();        self.dialog.remove();        $('.dlg-active').removeClass('dlg-active');        getActiveDialog().addClass('dlg-active');        return self;    };    //add buttons to the footer    self.addBtn = function (name, callback) {        if (typeof callback !== 'function') callback = null;        $("<a/>", { text: name, click: callback, href: '#', class: 'dlg-btn' }).appendTo(self.dialog.find('.dlg-footer'));        return self;    };    //maximum    //@nocache:是否不缓存调整前窗体的大小    self.maxWindow = function (nocache) {        if (!self.options.maximum || maxed) return;        self.dialog.find('.dlg-max').hide();        var body = getDialogBody(),            width = body.width(),            height = body.height();        if (!nocache) body.data('before', { width: width, height: height });        body.css({            width: function () { return $(window).width() - 15; },            height: function () { return $(window).height() - self.dialog.find('.dlg-header').height() - self.dialog.find('.dlg-footer').height() - 15; }        });        self.dialog.css({ top: 3, left: 5, margin: 0 })        .find('.dlg-restore').css({ display: 'inline-block' });        setIFrameWH();        maxed = true;    };    //restore    self.restoreWindow = function () {        if (!maxed) return;        self.dialog.find('.dlg-restore').hide();        var body = getDialogBody(),            original = body.data('before');        if (!original) original = { width: 600, height: 320 };        body.css({ width: original.width, height: original.height });        setDialogCentral();        self.dialog.find('.dlg-max').css({ display: 'inline-block' });        setIFrameWH();        maxed = false;    }    return self;}

演示（略），要想跑起来直接把源码从svn签下来吧，一直用的googlecode，就不发到github了，

【注1】css文件没有打包，直接写到演示页面了，如果觉得还行，想用到项目中去，自己专门建个文件夹存放：js/css/img，其次，主要是为了实现功能，样式没有做过多的要求，都是一次成型的，图标也是用everything在本机上用关键字，如restore.gif之类的搜出来的，一用也不觉得违和，就没继续深入了，总之默认风格比较极简，不满意只有自定义css了

【注2】代码持续有小改动，以上源码是第一次发布的版本，仅作示例，所以最好是到下面地址签出最新代码来

地址：http://jq-intellisense-autocomplete.googlecode.com/svn/trunk/