可拖动的jQuery Colorbox

四个非常简单而有效的方法来呈现您的jQuery Colorbox窗口可拖动 - 没有依赖性,也没有开销。

Jack Moore 的jQuery插件Colorbox可能是最复杂和最受欢迎的灯箱解决方案。它非常轻巧,非常高效,同时还提供了令人难以置信的有用功能。除此之外,它很好的维护,错误通常是立即修复的。

但是,到目前为止,没有让模态对话框可拖动的选项。我们在不同的项目中使用Colorbox,通常我们需要这个功能 - 所以我们为这个工作开发了自己的小帮手脚本。该代码在MIT开放源代码许可证下作为免费软件发布。

前两种方法使用Colorbox回调函数“onComplete”。顾名思义,这个函数在模态窗口内容被完全加载时被调用。以下脚本让您通过抓取标题栏来拖动Colorbox - 就像典型的Windows应用程序一样:

onComplete: function() {
    $('#cboxTitle').on({
        mousedown: function(e){
            var os = $('#colorbox').offset(),
                dx = e.pageX-os.left, dy = e.pageY-os.top;
            $(document).on('mousemove.drag', function(e){
                $('#colorbox').offset({ top: e.pageY-dy, left: e.pageX-dx } );
            });
        },
        mouseup: function(){ $(document).unbind('mousemove.drag'); }
    });
}

一个只有几行代码的可拖动的Colorbox - 非常简单,不是吗?下一个脚本可以让你抓住任何地方的模态窗口- 而不仅仅是标题栏。但是,Colorbox中通常有一些元素不能触发拖动事件。因此,我们将这些元素排除为句柄:“ input,textarea,button,a,.no_drag ”。

onComplete: function(e) {
    $('#colorbox').on({
        mousedown: function(e){
            if (~$.inArray(e.target, $('input, textarea, button, a, .no_drag', $('#colorbox')))) return;
            var os = $('#colorbox').offset(),
                dx = e.pageX-os.left, dy = e.pageY-os.top;
            $(document).on('mousemove.drag', function(e){
                $('#colorbox').offset({ top: e.pageY-dy, left: e.pageX-dx } );
            });
        },
        mouseup: function(){ $(document).unbind('mousemove.drag'); }
    });
}

这只是一个额外的代码行,我们检查点击的对象是否在排除的元素列表中。任何jQuery选择器将在这里工作。

我们的第三个解决方案呈现任何 Colorbox模式窗口的标题栏拖动。我们使用jQuery的“on”函数在创建时自动绑定Colorbox实例:

$(document).on({
    mousedown: function(e){
        var os = $('#colorbox').offset(), dx = e.pageX-os.left, dy = e.pageY-os.top;
        $(document).on('mousemove.drag', function(e){
            $('#colorbox').offset({top: e.pageY-dy, left: e.pageX-dx});
        });
    },
    mouseup: function(){ $(document).unbind('mousemove.drag'); }
}, '#cboxTitle');

最后,我们还创建了一个简单高效的jQuery插件,用于向所有绝对定位的DOM元素添加拖拽功能:

(function($){
    $.fn.tinyDraggable = function(options){
        var settings = $.extend({ handle: null, exclude: null }, options);
        return this.each(function(){
            var dx, dy, el = $(this), handle = settings.handle? $(settings.handle, el): el;
            handle.on({
                mousedown: function(e){
                    if (settings.exclude && ~$.inArray(e.target, $(settings.exclude, el))) return;
                    var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
                    $(document).on('mousemove.drag',
                        function(e){ el.offset({top: e.pageY-dy, left: e.pageX-dx});
                    });
                },
                mouseup: function(e){ $(document).off('mousemove.drag'); }
            });
        });
    }
}(jQuery));

用法简单明了。有一个绝对定位的元素,如Colorbox,通过绑定tinyDraggable使其可拖动,如下所示:

$('#colorbox')。tinyDraggable({handle:'#cboxTitle',exclude:'input,textarea' });

“句柄”和“排除”是可选参数。插件源代码和缩小的JavaScript文件在GitHub上可用:  jQuery-tinyDraggable


关于“ 可拖动的jQuery Colorbox 的评论

发表评论