Javascript 添加拖放功能AngularJS+；海查特

我的功能性Highchart运行正常，但我也希望添加一个拖放选项，在该选项中，您可以通过向图表中拖动按钮或其他内容来添加新的数据系列

我不需要完整的代码答案，只需要一些函数和库的指南就可以了

无论如何，我将把实际代码的一部分粘贴到这里，您始终可以使用以下JSFIDLE访问它：

谢谢

HTML:

---

尝试使用角度UI网格，即，

UI网格

进行拖放。

如果可以使用库，请查看

<div ng-controller="MyCtrl">
  Hello, {{name}}!
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
 <div ng-controller="MyCtrl" id="container" style="height: 400px; width: 500px">   
    </div>       
        <div ng-controller="MyCtrl">
        <button ng-click="addata(0)"> addata1 </button>
        <button ng-click="addata(1)"> addata2 </button>
        <button ng-click="addata(2)"> addata3 </button>
        <button ng-click="deleteLast(2)"> deleteprof </button>
        </div>

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';

    chartOptions = {
                    chart: {
                        renderTo: 'container',//*****************************
                        type: 'area',
                    },title: {
                        text: 'Horas asignadas'
                    },
                    xAxis: {
                        categories: ['enero', 'feb', 'mar', 'ab', 'may', 'jun', 'jul','ago','sept','oct','nov','dic'],
                        tickmarkPlacement: 'on',
                        title: {
                            enabled: false
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'horas'
                        },
                        labels: {
                            formatter: function () {
                                return this.value ;// / 1000;
                                }
                            },
                        plotLines: [{
                            color: 'red', // Color value
                            dashStyle: 'longdashdot', // Style of the plot line. Default to solid
                            value: 8, // Value of where the line will appear
                            width: 2 // Width of the line    
                        }]
                    },
                    plotOptions: {
                        area: {
                            stacking: 'normal',
                            lineColor: '#666666',
                            lineWidth: 1,
                            marker: {
                                lineWidth: 1,
                                lineColor: '#666666'
                            }
                        }
                    },
                    series: [{ //asignaturas
                        id: 'c',
                        name: 'extra',
                        color: 'LightSkyBlue ',
                        data: [2,3,4,3,3,4,3,2,3,3,2,1]
                    }, {
                        id: 'b',
                        name: 'Reservados',
                        color: 'red',
                        data: [1,1,2,2,3,2,2,2,4,2,2,1]

                    }, {
                        id: 'a',
                        name: 'Fijos',
                        color: 'yellow',
                        data: [2,3,4,3,4,3,2,2,2,2,3,2]
                    }]
                }
                $scope.newData = {

                    gruposhoras:[{
                        id: 'd',
                        name: 'grupo1',                                                
                        data: [1,1,1,1,1,5,1,1,1,1,1,1]
                    }, {
                        id: 'e',
                        name: 'grupo2',                       
                        data: [2,2,2,2,2,2,2,2,2,2,2,1]

                    }, {
                        id: 'f',
                        name: 'grupo3',                       
                        data: [3,3,3,3,3,3,3,3,3,3,3,3]
                    }]
                }

                $scope.addata=function(index){
                    for (var i = chartOptions.series.length - 1; i >= 0; i--) {
                        if(chartOptions.series[i].id == $scope.newData.gruposhoras[index].id){
                            return;
                        } //comprobamos que no esté ya introducido
                    }

                    chartOptions.series.reverse();
                    var nuevaestuc = $scope.newData.gruposhoras[index];

                    chartOptions.series.push(nuevaestuc);
                    chartOptions.series.reverse();


                   var grafica2 = new Highcharts.chart(chartOptions);

                }//fin addata

                 $scope.deleteLast=function(index){

                    var tam = chartOptions.series.length -1
                    if(chartOptions.series[0].name=='Reservados' || chartOptions.series[0].name=='Fijos'){
                        return;
                    }
                    chartOptions.series.reverse();
                    chartOptions.series.pop();
                    chartOptions.series.reverse();  
                    var grafica2 = new Highcharts.chart(chartOptions);  

                }


    var grafica2 = new Highcharts.chart(chartOptions);

}