Drag points with drag points between drag and click

Question

I use highcharts 3.0.7 with the drag-and-drop module so that you can drag-and-drop the points of the displayed series.

The user must be able to drag the point to move it, but also click on the point to delete it.

The problem is that the drag event accepts the click event and the last one does not fire.

Here is my code:

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-more.js"></script> <script src="https://rawgithub.com/highslide-software/draggable-points/master/draggable-points.js"></script> <div id="container" style="height: 400px"></div> 

JS:

 var options = { chart: { renderTo: 'container', }, tooltip: { enabled: false }, plotOptions: { series: { animation: false, allowPointSelect: true, point: { events: { click: function (event) { console.log('click fired'); this.remove(); } } } } }, series: [{}] }; options.series[0].data = [[1,1], [2,3],[4,2]]; options.series[0].draggableX = true; options.series[0].draggableY = true; new Highcharts.Chart(options); 

http://jsfiddle.net/eu2d0t1L/2/ shows this.

Is there a way that allows both events to coexist?

A related question: when I comment:

 // options.series[0].draggableX = true; // options.series[0].draggableY = true; 

Deleting a point works, but generates an error: Uncaught TypeError: object is not a function in highcharts.js: 220 . Why?

Answer 1

Well, I'm not a specialist in highcharts.js, but since I didn’t get any response, I fixed draggable-points.js to make it work the way I wanted.

The patch is between // START PATCH and // END PATCH

  function drop(e) { if (dragPoint) { if (e) { var originalEvent = e.originalEvent || e, pageX = originalEvent.changedTouches ? originalEvent.changedTouches[0].pageX : e.pageX, pageY = originalEvent.changedTouches ? originalEvent.changedTouches[0].pageY : e.pageY, draggableX = dragPoint.series.options.draggableX, draggableY = dragPoint.series.options.draggableY, deltaX = dragX - pageX, deltaY = dragY - pageY, series = dragPoint.series, isScatter = series.type === 'bubble' || series.type === 'scatter', newPlotX = isScatter ? dragPlotX - deltaX : dragPlotX - deltaX - dragPoint.series.xAxis.minPixelPadding, newPlotY = chart.plotHeight - dragPlotY + deltaY, newX = dragX === undefined ? dragPoint.x : dragPoint.series.xAxis.translate(newPlotX, true), newY = dragY === undefined ? dragPoint.y : dragPoint.series.yAxis.translate(newPlotY, true); // START patch if ( deltaX == 0 && deltaY == 0 ) { // it actually a click; don't handle it as D&D dragPoint = null; return; } else { e.preventDefault(); // prevents handling it as a click } // END patch ...