javascript组件——可拖拽模态框

来源：互联网发布：jbl蓝牙音箱知乎编辑：程序博客网时间：2024/06/05 14:28
可拖拽模态框，根据项目需求在模态框中生成一个map。后续将抽象出contentArea部分
var Shamen = (function(global,$,echarts){    var defaults = {        dragHandle:null,    }    var html = {        ovl : '<div class="modal-overlay">' + '<div id="modal-content-dialog" class="modal-content"></div>' + '</div>',        titleArea : '<div class="title-area">' + '</div>',        contentArea: '<div id="generateChartArea">' + '</div>',        isOk: '<button>确定</button>'    }    function Shamen(rootEl,options){        this.options = $.extend({},defaults,options);        var css = {cursor: this.options.cursor || 'move'};        this.rootEl = rootEl;        this.$rootEl = $(this.rootEl);        this.$dragHandle = (this.options.dragHandle) ? $(this.options.dragHandle) : $("#modal-content-dialog");        this.init();        this.generateChart(this.options.chartOptions);        this.bind();        this.originDragHandleCursor = this.$dragHandle.css('cursor');        this.$dragHandle.css(css);    }    Shamen.prototype = {        init:function(){            $(html.ovl).appendTo(this.$rootEl);            $(html.titleArea).html((this.options.title)? this.options.title : '所选类型在各区的分布').appendTo("#modal-content-dialog");            $(html.contentArea).css({height:'85%'}).appendTo("#modal-content-dialog");            $(html.isOk).css({                'margin-left':'10px',                'margin-top':'-10px',                'z-index':1000            }).appendTo("#modal-content-dialog");            console.log('create ok');        },        generateChart: function(optionChart){            var options = $.extend({},optionChart);            var chart = echarts.init(document.getElementById("generateChartArea"));            $.get('resources/json/beijing.json',function(beijingJson){                    echarts.registerMap('Beijing', beijingJson, {                    });                chart.setOption(options);            });        },        bind: function(){            var selector = this.options.dragHandle || null;            var self = this;            var $el = $("#modal-content-dialog");            $el.on('mousedown.drag',selector,function(e){                var mousePos = {                    x: e.pageX,                    y: e.pageY                };                $(window).on('mousemove.drag',selector,function(e){                    var diff = {                        xDiff: e.pageX - mousePos.x,                        yDiff: e.pageY - mousePos.y                    };                    var elPos = {                        top: document.getElementById('modal-content-dialog').offsetTop,                        left: document.getElementById('modal-content-dialog').offsetLeft                    };                    $el.css({                        top: elPos.top + diff.yDiff,                        left: elPos.left + diff.xDiff                    });                    mousePos = {                        x: e.pageX,                        y: e.pageY                    };                });            });            this.$rootEl.on('mouseup.drag',function(e){                $(window).off('mousemove.drag');            });            $("button").click(function(){                $(".modal-overlay").remove();            });        }    }    return Shamen;})(window,jQuery,echarts);
0 0