可拖拽模態框，根據專案需求在模態框中生成一個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);