DragDrop on NetworkGraph?

Question

Good evening!

I'm trying to get coordinates of a dropped point on a network graph.

Unfortunately, something seems to goes wrong using the informations from the doc, but I may also have missed a crucial point.

My options looks like this one:

{ 
    plotOptions: {
        series: {
            dragDrop: {
            draggableX: true,
            draggableY: true,
          },
          point: {
            events: {
              drop: function (e) {
                 console.log('I have been dropped', this, e);
              },
              click: function (e) {
                console.log('I have been clicked', this, e);
              }
            }
          }
        }
    },
}

A reproduction case can be found here https://jsfiddle.net/41wvq62t/2/

Any idea of what's going wrong?

Answer 1

The series.dragDrop option is not supported for NetworkGraph, and consequently, point drag/drop events are unavailable. This inconsistency in the documentation has already been reported and will be corrected soon.

As a workaround, you can wrap the onMouseUp and onMouseDown functions from the networkGraph module to detect drag/drop position.

Example code:

(function(H) {
  H.wrap(Highcharts.seriesTypes.networkgraph.prototype, 'onMouseUp', function(proceed, point) {
    console.log('Drop ', point.name + ': ', point.plotX);
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  });
}(Highcharts));

(function(H) {
  H.wrap(Highcharts.seriesTypes.networkgraph.prototype, 'onMouseDown', function(proceed, point) {
    console.log('Drag ', point.name + ': ', point.plotX);
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  });
}(Highcharts));

Demo: https://jsfiddle.net/BlackLabel/htj0g619/

API Reference: :https://www.highcharts.com/docs/extending-highcharts/extending-highcharts