javascript组件——可拖拽模态框

最新推荐文章于 2024-07-12 18:49:24 发布

原创最新推荐文章于 2024-07-12 18:49:24 发布 · 602 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

30 篇文章

订阅专栏

前端

24 篇文章

订阅专栏

本文介绍了一个可拖拽的模态框组件实现方案，该组件内嵌了一个地图应用，利用ECharts库实现了地图数据可视化，并允许用户通过拖动调整模态框的位置。

可拖拽模态框，根据项目需求在模态框中生成一个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);