根据产品写的一个可拖拽的，可改变大小的小型插件

其中用到echarts和jquery自己下载，其中echarts是画图插件，无关紧要。不是关注的重点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .resize{
            position: absolute;
            bottom:0;
            right: 0;
            height: 20px;
            width: 20px;
            background-color: blue;
            cursor:se-resize;
            z-index: 1000;
        }

        .chart .inch div, .chart .inch div canvas{
            cursor: pointer;
        }

    </style>
</head>
<body>
<div class="chart" id="test" style="width: 200px;height: 200px;position: absolute;top: 0;left: 0;border: 1px solid red;cursor: move;">
    <div class="inch" id="chart" style="width: 100%;height: 100%;"></div>
    <div class="scale resize" id="resize"></div>
</div>
<div class="" id="test2" style="width: 200px;height: 200px;position: absolute;top: 300px;left: 0;border: 1px solid red;cursor: move;">
    <div class="inch" id="chart2" style="width: 100%;height: 100%;"></div>
    <div class="scale resize" id="resize2"></div>
</div>
<script src="drag_demo/jquery.min.1.11.2.js"></script>
<script src="drag_demo/echarts.min.js"></script>
<script src="drag_demo/draw_charts.js"></script>
<script src="drag_demo/drag_my.js"></script>
<script>
    var drag = new Drag('test','out');
    drag.init();
    var resize = new Drag('resize','inner');
    resize.init();

    document.getElementById('test').addEventListener('click',function(){
       /* drag.dispose();
        drag=null;*/
    });

    var drag2 = new Drag('test2','out');
    drag2.init();
    var resize2 = new Drag('resize2','inner');
    resize2.init();


    new DEMO.Draw().test('chart');
    new DEMO.Draw().test2('chart2');
    drag= null;
    drag2= null;
    resize = null;
    resize2 = null;

</script>
</body>
</html>

drag_my.js

function Drag(id,inner) {
    this.dragObject = document.getElementById(id);
    this.disX= 0;
    this.disY =0;

    this.inner = inner;
}
/*Drag.prototype.enabled=true;*/
Drag.prototype.dragStatus=false;
Drag.prototype.moveFun=null;
Drag.prototype.upFun=null;

/** 也许严谨点应该释放内存，暂时注释*/
/*Drag.prototype.dispose=function(){
    this.dragObject.onmousedown=null;
    this.fnDown=null;
    this.fnMove=null;
    document.removeEventListener('mousemove',this.moveFun);
    document.removeEventListener('mouseup',this.upFun);
    this.moveFun=null;
    this.upFun=null;
};*/
Drag.prototype.init = function () {
    var This = this;
    This.dragObject.onmousedown = function (ev) {
        var ev = ev || window.event;
        This.fnDown(ev);
        ev.stopPropagation();
        return false;
    };
    this.moveFun=function (ev) {
        if(!This.dragStatus)return;
        var ev = ev || window.event;
        This.fnMove(ev);
        ev.stopPropagation();
        return false;
    };
    this.upFun=function (ev) {
        This.dragStatus=false;
        ev.stopPropagation();
        return false;
    };
    document.addEventListener('mousemove',this.moveFun);
    document.addEventListener('mouseup',this.upFun);
};

/*鼠标按下*/
Drag.prototype.fnDown =function (ev) {
    var This = this;
    This.dragStatus=true;
    this.disX = ev.clientX - this.dragObject.offsetLeft;
    this.disY = ev.clientY - this.dragObject.offsetTop;
    ev.stopPropagation();
};
/*鼠标移动*/
Drag.prototype.fnMove = function (ev) {


    var This = this;
    var L = ev.clientX - This.disX;
    var T = ev.clientY - This.disY;
    var ddcw= document.documentElement.clientWidth;
    var tdow = This.dragObject.offsetWidth;
    var an = ddcw-tdow;
    var ddcH= document.documentElement.clientHeight;
    var tdoH = This.dragObject.offsetHeight;
    var en = ddcH - tdoH;
    if(L<0){
        L = 0;
    }else if(L>an){
        L = an;
    }
    if(T<0){
        T=0;
    }else if(T>en){
        T = en;
    }
    if(this.inner=='inner'){
       $(This.dragObject).parents('div').css({
           height:T+20+'px',
           width:L+20+'px'
       });
       /** 图表重画*/
        This.resizes();
    }else{
        This.dragObject.style.left = L+'px';
        This.dragObject.style.top = T+'px';
    }
    ev.stopPropagation();
};

Drag.prototype.resizes = function () {
    for(var ch in  DEMO.chart){
        DEMO.chart[ch].resize();
    }
}

draw_charts.js

var DEMO =  DEMO || {};

DEMO.chart = {
    chart1:null,
    chart2:null
}

DEMO.Draw = function () {
}
DEMO.Draw.prototype = {
    constructor:DEMO.Draw,
    init:function(){
        
    },
    test:function (id) {
        DEMO.chart.chart1 = echarts.init(document.getElementById(id));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        DEMO.chart.chart1.setOption(option)
    },
    test2:function (id) {
        DEMO.chart.chart2 = echarts.init(document.getElementById(id));
        // 指定图表的配置项和数据
        var data = [];

        for (var i = 0; i <= 360; i++) {
            var t = i / 180 * Math.PI;
            var r = Math.sin(2 * t) * Math.cos(2 * t);
            data.push([r, i]);
        }

        option = {
            title: {
                text: '极坐标双数值轴'
            },
            legend: {
                data: ['line']
            },
            polar: {
                center: ['50%', '54%']
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            angleAxis: {
                type: 'value',
                startAngle: 0
            },
            radiusAxis: {
                min: 0
            },
            series: [{
                coordinateSystem: 'polar',
                name: 'line',
                type: 'line',
                showSymbol: false,
                data: data
            }],
            animationDuration: 2000
        };
        DEMO.chart.chart2.setOption(option);

    }
}

效果：

根据产品写的一个可拖拽的，可改变大小的小型插件

猜你喜欢