添加拖放特性AngularJS + hightcharts

我有我的功能Highchart运行正确，但我想也添加一个拖放选项，你可以添加新的数据系列，通过拖动一个按钮或其他东西到图形。

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

无论如何，我将粘贴部分实际代码在这里，你总是可以使用下面的angular jsfiddle访问它:

http://jsfiddle.net/amateos/Lvc0u55v/8492/

谢谢!

HTML:

<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>

angularjs:

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);
}