您的位置:首页 > Web前端 > JQuery

jquery插件:拖动任意层

2015-04-10 13:05 246 查看
已知百度能搜索到一个叫anydrag的jquery插件,但是有缺点,不兼容最新版的jquery

于是改编了一个

js

[code]/*
*编写:Comvir
*作用:拖动任意HTML元素
*/
; (function ($) {
    $.fn.anydrag = function (options) {
        var options = $.extend({
            hotregion: ""//热区
        }, options);//定义参数
        var handle = $(this);
        var mousedown = false;
        var offsetX = 0;
        var offsetY = 0;
        handle.each(function () {
            var target = $(this);
            var height = handle.height();
            var width = handle.width();
            var id = handle.attr("id");
            var hotid = "#" + id + " " + options.hotregion;
            $(hotid).mousedown(function (e) {
                mousedown = true;
                var e = e || window.event;
                offsetX = e.clientX;
                offsetY = e.clientY;
                $(this).css('cursor', 'move');
            });
            $(document).mouseup(function () {
                mousedown = false;
                $(hotid).css('cursor', 'default');
            }).mousemove(function (e) {
                if (!mousedown)
                    return;
                var left = parseFloat(handle.css("left"));
                var top = parseFloat(handle.css("top"));
                var e = e || window.event;
                var x = left + (e.clientX - offsetX);
                var y = top + (e.clientY - offsetY);
                offsetX = e.clientX;
                offsetY = e.clientY;
                handle.css({ "left": x + "px", "top": y + "px" });
            });
        });
        return handle;
    }
})(jQuery);


用法

$(id).anydrag({hotregion:”热区id”});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: