highcharts draggable-points conflict between drag and click

Question

I am using highcharts 3.0.7 with draggable-points module, to make it possible to drag points of a displayed series.

User should be able to drag a point to move it, but also to click on a point to remove it.

The problem is that dragging event takes over click event and the latter is not fired.

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 to allow both events to co-exist ?

Related question: when I comment:

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

Point removal is working but generates an error: Uncaught TypeError: object is not a function in highcharts.js: 220. Why ?

Answer 1

Well, I am not a highcharts.js specialist, but since I didn't get any answer, I patched draggable-points.js to make it work like 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's actually a click; don't handle it as D&D
                    dragPoint = null;
                    return;
                }
                else {
                    e.preventDefault();  // prevents handling it as a click
                }

                // END patch

...