jquery插件:拖动任意层

来源:互联网 发布:53分钟68分钟知乎截图 编辑:程序博客网 时间:2024/05/16 12:50

已知百度能搜索到一个叫anydrag的jquery插件,但是有缺点,不兼容最新版的jquery
于是改编了一个

js

/**编写: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”});

0 0